JavaScript vs. TypeScript vs. ReasonML

2021-03-02 高富帥程式設計師

在這篇博文中,我將對三種程式語言的優缺點進行闡述,分別是:JavaScript、TypeScript以及ReasonML。本文的內容基於最近在一些較小的實際項目上使用TypeScript和ReasonML的經驗以及多年的JavaScript經驗。

1.   靜態類型的優缺點

優點:

文檔:對於大多數代碼,記錄參數類型是非常有用的,這樣可以方便區分調用者和被調者。

好處遠不止這些。當我重新訪問舊的JavaScript代碼庫來添加靜態類型時,我可能已經忘了它是如何工作的了。有了這些類型,可以更清楚地說明一切是如何運行的。例如,為了給某函數的參數添加類型注釋,我經常不得不訪問它的調用位置。也就是說,類型暗示了「如何使用這個函數?」的信息。

編輯器中的自動補齊功能可以說是「更好的文檔」。這意味著在使用API時,可以減少查閱文檔的頻率(良好的注釋也是很有幫助的)。例如,當我在2006年開始DOM編程時,我是通過GWT(基於Java,且出於多種原因,是當時最流行的解決方案)實現的。由於Eclipse的自動補齊功能,探索和學習DOM API變得十分有趣。

一種快速檢驗參數類型的方法。對某些函數(看起來像不必要的樣板代碼)添加程序化類型檢驗時,我會嘗試在JavaScript中使用靜態類型。

有助於重構(在枚舉中添加成員等)。

缺點:

需要花時間來學習。

這是一個複雜的附加層,需要在不同的層級上再次編寫代碼。

表達受限。如果使用了泛型、co-variance和contra-variance(例如,一個字符串數組不是一個對象數組的子類型)等等,那麼一切將變得複雜。

無法阻止錯誤的出現。至少目前研究表明是這樣的。根據我的經驗,確實可以捕捉某類錯誤(例如,沒有驗證null)。但是如果採用單元測試而不是添加靜態類型的話,或許我能夠更早地捕捉到它們。所以要檢驗較為嚴重的錯誤時,最好進行測試。

喪失可交互性且編譯需要時間。另一方面,在JavaScript生態系統中,避免編譯幾乎是不可能的。

2.  ReasonML

如果想體驗靜態類型提供的最佳功能,請使用ReasonML(或者OCaml,ReasonML基於此開發的)。例如,幾乎所有的語言特性都是經過精心設計的,因此只需要最少量的類型注釋即可(通過支持類型推斷)。

令人印象深刻的是,儘管時間已經久遠(尤其是對編輯器的支持),一些重要的部分仍在更新:更好地支持Promises、迭代和異步迭代;改進名為Belt的標準庫;改進JavaScript的互用性(這已經很不錯了,但比我想要的複雜多了);更好地支持Unicode字符串。

ReasonML的構建時間非常短,比TypeScript快得多,這絕對是個優勢。

它綁定了一些JavaScript庫,但選擇仍然有限:請參閱Reason Package Index。

可以選擇原生。例如,Jared Forsyth用ReasonML編寫了遊戲Gravitron,可以在Android,IOS,web和macOS上運行。

有關ReasonML的更多信息,請參閱「探索ReasonML和函數式編程」(可以免費在線閱讀)。

3.  TypeScript

TypeScript的類型系統比我預期的更輕量級。比起Java,它更像FP。例如,假設創建一個接口,這個接口將「匹配」由該接口描述的形狀的所有對象。你可以隨時引入接口而無需改動現有的代碼。

這個類型系統非常強大和直觀。鑑於聯合類型(union types)、交叉類型(intersection types)以及可辨識聯合類型(discriminated union types),你可以將許多慣用的JavaScript類型變成靜態化類型。

支持編輯器(如Visual Studio Code,WebStorm等),都非常好用。

許多npm軟體包要麼帶有靜態類型定義,要麼具有易於安裝的外部定義。更多相關信息,請參閱DefinitelyTyped。

通常,JavaScript互用性非常好。但有一個例外:通過對象字面量來模擬命名參數不必要對類型靜態化(更多信息)。

總結:相比JavaScript和ReasonML的特性,TypeScript佔據了很好的中間地帶。我很想了解它在大型項目中的效果如何。

4.  JavaScript

整個生態系統在不斷地推陳出新(如Babel等)。

可以通過npm獲取各類兼容性庫。

可以隨時更新動態。

可以選擇在沒有構建步驟的情況下探索和創建代碼。

有關JavaScript的更多信息,請參閱我的系列書籍「探索JS」(可以免費在線閱讀)。

5.  結論:JavaScript的生態系統比以往更強大

是否使用靜態類型取決於個人。我的建議是:

用你喜歡和熟悉的那類語言。

對目前正在使用的語言的優缺點有所認知。

就個人而言,一旦項目增長超過一定規模(或者我預計它最終會變得那麼大),我就開始使用某種靜態類型。

目前,JavaScript生態系統的優勢和多樣性令人驚嘆:你可以根據需求(以及不同程度的工作)在JavaScript、ReasonML和TypeScript之間切換。它們可以共享一些工具、庫以及語法。例如,當使用ReasonML需要快速模板解決方案時,我可以通過npm使用基於JavaScript的EJS庫。

最後,除此之外還有許多其他好的選擇:靜態類型檢查器Flow,函數式程式語言Elm等。

英文原文:http://2ality.com/2018/03/javascript-typescript-reasonml.html

相關焦點

  • 從 JavaScript 到 TypeScript - 聲明類型
    要為變量或者常量指定類型也很簡單,就是在變量/常量名後面加個冒號,再指定類型即可,比如// # typescript// 聲明函數 pow 是 number 類型,即返回值是 number 類型// 聲明參數 n 是 number 類型function pow(n: number): number {    return
  • Javascript 性能測試 [每日前端夜話0xB1]
    正文共:916 字預計閱讀時間:7 分鐘作者:Deepak Gupta翻譯:瘋狂的技術宅來源:codeburst我們都知道 for 循環比 each 或 javascript 函數更快,因為在javascript函數的引擎下可能會使用for循環或其他我不確定的東西。
  • VS什麼意思?鑽石淨度VS什麼意思
    鑽石淨度中的vs什麼意思?選購鑽石時,在鑽石淨度方面分為好幾個等級,其中每個級別鑽石的特點都不一樣,價格方面也有一定差距,通過對市場的分析來看,大部分消費者對vs等級的鑽石都比較關注,那麼鑽石vs具體表示的是什麼意思呢?下面就和小編來了解一下吧。
  • 受夠了JavaScript的小毛病,我將整個應用移植到了TypeScript
    https://www.executeprogram.com/courses/typescript/lessons/basic-types這一條是我們的業務特有的:TypeScript 比其他選項更受歡迎。這意味著更多的人希望從像我們這樣的課程中學習 TypeScript。
  • TKoa 1.0.1 發布,TypeScript 版的 Node.js Koa 框架
    更新信息: npm增加編譯好的 javascript 文件T-Koa 介紹
  • [譯] JavaScript與TypeScript中的Symbols
    [譯] JavaScript與TypeScript中的Symbols原文連結 https://fettblog.eu/symbols-in-javascript-and-typescript/Symbol是一個JavaScript與TypeScript內建的數據類型. Symbol與其他數據類型相比, 能夠作為對象的屬性鍵值來使用.
  • UFC 259:努涅斯vs安德森,馬哈切夫vs多貝爾
    比賽對陣表: UFC女子羽量級冠軍爭霸賽: 阿曼達·努涅斯(Amanda Nunes)(#c) vs.梅根·安德森(Megan Anderson) 輕重量級比賽: 蒂亞戈·桑託斯(Thiago Santos)(#2) vs.
  • 「賽前解析」伯恩利vs狼隊 卡斯魯厄vs漢堡 聖克拉拉vs吉馬良斯
    001【英超】伯恩利vs狼隊在交戰往績方面,伯恩利過去8次面對狼隊取得3勝4平1負的戰績,其中近3次交鋒1勝2平,在心理上稍微佔據優勢。主隊負比分 0-1 0-2003【德乙】卡斯魯厄vs漢堡客隊勝比分:0-1 0-2本場數據方面初始以漢堡-0.25中位起步,後期變化不大
  • 陳立農1vs98是什麼梗 陳立農1vs98意思介紹
    最近網絡上很多的小夥伴都在說陳立農1vs98,很多小夥伴完全一臉懵,陳立農1vs98是什麼意思呢?來看看陳立農1vs98是什麼梗呢?  陳立農1vs98是什麼意思  VS就是對立的意思,1VS98的意思是指陳立農當初在參加偶像練習生的時候收到排擠,然後一個人挑戰98個人。
  • 陳立農1vs98是什麼梗 陳立農1vs98的出處是哪裡
    陳立農1vs98是不是讓不少網友最近一直在說的梗句,也是相當有趣,但是有不少人還不明白這個陳立農1vs98是什麼意思,那麼一起來和表哥看看陳立農1vs98的出處是哪裡吧!陳立農1vs98是什麼意思?VS就是對立的意思,1VS98的意思是指陳立農當初在參加偶像練習生的時候收到排擠,然後一個人挑戰98個人。
  • 陳立農1vs98是什麼意思什麼梗 1VS98出處來源
    陳立農1vs98是什麼意思?最近,在網上經常看到很多小夥伴再說陳立農1vs98,那麼陳立農1vs98到底是什麼梗?陳立農1vs98是什麼意思?下面小編就為大家帶來陳立農1vs98的意思介紹。  VS就是對立的意思,1VS98的意思是指陳立農當初在參加偶像練習生的時候收到排擠,然後一個人挑戰98個人。
  • 最詳細從零開始配置 TypeScript 項目的教程
    在 Prettier vs Linters[69] 中詳細說明了兩者的區別,Linters 有兩種類型的規則:格式規則(Formatting rules):例如 max-len[70]、keyword-spacing[71] 以及 no-mixed-spaces-and-tabs[72] 等質量規則(Code-quality rules):例如 no-unused-vars[73]、no-implicit-globals
  • 最詳細的從零開始配置 TypeScript 項目的教程
    在 Prettier vs Linters[69] 中詳細說明了兩者的區別,Linters 有兩種類型的規則:格式規則(Formatting rules):例如 max-len[70]、keyword-spacing[71] 以及 no-mixed-spaces-and-tabs[72] 等質量規則(Code-quality rules):例如 no-unused-vars[73]、no-implicit-globals
  • ArrayList vs. LinkedList vs. Vector
    ArrayList vs. LinkedList vs. Vector1.
  • 鑽石級別VS/H是什麼意思?鑽石淨度vs好,還是vvs?
    鑽石的級別vs,vs是英文Very Slight(微瑕級)的首字母縮寫。鑽石VS等級是指鑽石淨度的等級。它是指在評估鑽石的淨度時,在10倍放大鏡下可以看到的非常小的瑕疵,但肉眼很難識別。三、鑽戒顏色淨度是vs什麼意思?您好,鑽戒的顏色等級是D-E,表示鑽戒屬於最好的顏色等級,鑽石顏色為白色,顏色等級差的鑽石會偏黃色。其次,淨度是VS說明鑽石裡面的裂紋雜質比較少,這個等級的淨度屬於中等水平。
  • 意甲直播:尤文圖斯vs都靈,國米vs博洛尼亞,羅馬vs薩索洛
    尤文圖斯亞vs都靈這場比賽是都靈德比,雙方肯定刺刀見紅。上輪尤文1-1被貝內文託逼平,原因之一是C羅輪休,這會是比較奇怪的決定,因為歐冠已經出線,寧願選擇意甲輪休,也要去打歐冠。是太放心隊友,還是歐冠進球更重要?不過本輪叢駿哥是支持C羅輪休的,因為下周中對巴薩,可能是C羅對梅西最後一場了。
  • 2020火箭vs湖人賽程時間表,火箭vs湖人直播哪裡能看?
    2020火箭vs湖人賽程時間表,火箭vs湖人直播哪裡能看?那麼NBA火箭vs湖人直播在哪裡看,NBA西部半決賽火箭vs湖人的賽程時間安排又是怎樣的呢?以下為火箭vs湖人具體賽程時間表:(北京時間)G1:9月5日上午9點;G2:9月7日上午8點半;G3:9月9日上午9點;G4:9月11日 具體時間待定;
  • 同樣是書包:小學生vs初中生vs高中生,大學生:都是弟弟!
    同樣是書包:小學生vs初中生vs高中生,大學生:都是弟弟!   哈嘍,歡迎你點開了小編的文章,遇見你是我的最大的幸運!   同樣是書包:小學生vs初中生vs高中生,大學生:都是弟弟!看完了小編的文章你們有什麼想法呢?歡迎在下方評論!
  • 歐冠16強抽籤預測:曼城vs巴薩,尤文vs馬競,皇馬利物浦遇剋星
    以下是本刊預測的分組對手,歡迎各位讀者留下自己的期待和預測,曼城和巴薩將迎來瓜迪奧拉和梅西的師徒會,尤文再次面臨馬競,利物浦迎戰意甲風格濃厚的拉齊奧,而皇馬則挑戰強敵萊比錫紅牛:曼城vs巴薩拜仁vs塞維亞尤文圖斯vs
  • 切爾西vs熱刺,奧蘭多vs新英格蘭,南安普頓vs曼徹斯特聯
    切爾西vs熱刺切爾西上輪聯賽客場對陣紐卡斯爾聯,憑藉對方的烏龍球以及亞伯拉罕的入球,最終藍軍輕取對手,豪取英超3連勝,前9輪錄得5勝3平1負。奧蘭多vs新英格蘭奧蘭多城季後賽1/4決賽,常規時間內戰平紐約城,納尼打入1球,加時賽並未改寫,奧蘭多城在點球大戰勝出。本周末,奧蘭多城將在半決賽主場迎戰新英格蘭革命,自2015年進入美職足以來,奧蘭多城過往8次主場面對新英格蘭革命取得了4勝4平的優勢戰績。