隨著 JavaScript 項目變得越來越復(fù)雜，開發(fā)者開發(fā)了新的工具和語言來提高代碼質(zhì)量和工作流程。

除了單元測試，TypeScript 和 Flow 等靜態(tài)類型檢查器正在成為專業(yè)開發(fā)團隊的標準。無論項目大小，使代碼更易于理解并在開發(fā)階段捕獲錯誤的好處已被證明是非常有用的。

在沒有使用類型檢查工具的情況下處理大型 JavaScript 代碼庫會讓你感到頭痛，特別是那些在運行時才會發(fā)現(xiàn)的錯誤會產(chǎn)生很多，但是當你采用了類型檢查，或者使用了TypeScript之后，你會發(fā)現(xiàn)這些類型的錯誤大大減少，不僅開發(fā)效率得到提高，最重要的是代碼的質(zhì)量得到了極大提升。

在本文中，主要介紹這兩個工具，并說明它們的工作方式。并且演示如何將TypeScript 和 Flow 集成到 React 應(yīng)用程序中。

TypeScript

TypeScript 是微軟開發(fā)的一種編程語言。它是開源的，并得到了一個龐大而活躍的社區(qū)的支持。

TypeScript 是 JavaScript 的類型化超集，可編譯為純 JavaScript。

“類型化”一詞表示 TypeScript 要求程序員聲明給定變量的數(shù)據(jù)類型。

“超集”一詞表示 TypeScript 允許程序員使用 JavaScript 提供的所有功能，以及一些額外的功能 ，如接口，泛型，裝飾器等。

下圖展示了 TypeScript 運行方式的高級概述。編譯器接收 TypeScript 文件(.ts 或 .tsx)，然后將它們“轉(zhuǎn)換”為可由瀏覽器運行的有效 JavaScript 代碼。

我們來看一些用 TypeScript 編寫的簡單代碼：

function getName(person: IPerson):void{ 
    console.log(person); 
} 
 
interface IPerson{ 
    name: string 
    age: number 
} 
 
getName({"name":"john",age:20}); 
 
getName({age:23})  //Argument of type '{ age: number; }' is not assignable to parameter of type 'IPerson'.   

正如我們在上面的代碼塊中看到的，我們聲明了一個函數(shù)，該函數(shù)接收一個具有兩個屬性的對象，分別是字符串和數(shù)字類型的名稱和年齡。調(diào)用該函數(shù)時，TypeScript 會檢查提供的對象的類型是否正確，如果類型不正確，就會像在調(diào)用第二個函數(shù)的時候代碼將無法編譯并拋出錯誤。

Flow

與 TypeScript 相比，F(xiàn)low 并不是一種編程語言，它被叫做JavaScript 的靜態(tài)類型檢查器，類似于我們經(jīng)常使用的ESLint，它是由 Facebook開發(fā)的。

我們可以通過向常規(guī) JavaScript 文件添加特殊注釋來使用 Flow，指示我們期望的類型，或者我們可以讓工具推斷出期望的類型并在發(fā)現(xiàn)任何錯誤時警告我們。

我們來看看以下 Flow 官方文檔的案例：

 // @flow 
function square(n) { 
  return n * n; // Error! 
} 
 
square("2"); 

注意到上面代碼的第一行了嗎?為了讓工具知道它必須檢查哪些文件，我們通過添加注釋 @flow在每個要包含在 Flow 監(jiān)控過程中的文件中。

使用 Flow，您不必更改文件的擴展名，而是繼續(xù)在帶注釋的文件.js和.jsx文件中編寫普通的 JavaScript。

如果我們保留上面的代碼，JavaScript 引擎會因為注釋而拋出錯誤，因此，作為額外的步驟，我們必須在最后編譯代碼之前刪除所有注釋。

當然我們可以使用Babel 或者 flow-remove-types等工具來清除它們。

Flow 與 TypeScript 與 React 的集成

一個標準的 React 應(yīng)用程序

創(chuàng)建 React 應(yīng)用程序的最簡單方法是使用create-react-app工具。

我們將創(chuàng)建兩個相同的 React 應(yīng)用程序，一個用于測試 TypeScript，另一個用于測試 Flow。

首先，讓我們通過創(chuàng)建一個沒有任何類型檢查的 React 應(yīng)用程序來看看這個工具的實現(xiàn)：

npx create-react-app demo-app 

React啟用TypeScript

如果我們從頭開始，我們可以像這樣使用 –template 標志來創(chuàng)建一個支持 TypeScript 的 React 應(yīng)用程序：

npx create-react-app react-ts --template typescript 

對于一個新項目這是一個最佳的辦法，如果我們想要在現(xiàn)有的項目中啟用react的話，我們需要做下面的操作。

yarn add typescript @types/node @types/react @types/react-dom @types/jest 

接下來，我們將現(xiàn)有的.js和.jsx文件重命名為.ts和.tsx。

重啟我們的開發(fā)服務(wù)器之后，你會發(fā)現(xiàn)項目目錄中多了一個tsconfig.json文件，這個文件是typescript的配置文件，你可以對它進行一些偏好配置。

然后我們創(chuàng)建一個React組件：

import React from "react"; 
interface Props{ 
    items: Item[] 
} 
 
export interface Item { 
    id:number, 
    name:string 
} 
function ItemList(props:Props){ 
    const listItems = props.items.map(item=>item.name); 
    return listItems; 
} 
export default ItemList; 

TypeScript 允許我們使用接口聲明我們期望的對象類型。

在這里，我們聲明了 Props 接口，它有一個屬性 item，一個 Item 類型的對象數(shù)組——另一個接口有兩個屬性，一個 number 類型的 id 和一個 string 類型的 name，兩者都是必需的。

然后，我們通過添加注解 props：Props 說我們的函數(shù)組件 ItemsList 的 props 參數(shù)是一個 Props 類型的對象。

讓我們ItemsList在我們的App.tsx文件中實現(xiàn)這個組件并聲明一個名為 items 的常量，就像一個包含虛擬對象的數(shù)組一樣，看看 TypeScript 是如何反應(yīng)的：

您可以看到顯示了一個錯誤，指出 Item 必須包含 id 和 name 屬性。如果我們此時嘗試運行應(yīng)用程序，TypeScript 可以避免我們產(chǎn)生錯誤。

現(xiàn)在讓我們刪除我們的項目 const 的類型，看看這個錯誤是否消失：即使我們沒有聲明項目 const 應(yīng)該是 type Item[]，TypeScript 也足夠聰明，可以發(fā)現(xiàn)在我們的ItemsList組件中使用它是不安全的。

現(xiàn)在讓我們通過向組件添加兩個適當?shù)挠涗泚斫鉀Q這個問題：

const items: Item[] = [{ id: 1, name: "One" },{ id: 2, name: "Two" }]; 

我們現(xiàn)在看到應(yīng)用程序編譯并成功執(zhí)行：通過引入TypeScript，我們避免了運行潛在錯誤的代碼，同時還通過顯式聲明整個應(yīng)用程序中使用的類型使代碼本身更具可讀性。

React啟用Flow

yarn add flow-bin npm run flow init 

然后我們創(chuàng)建和之前一樣的ItemsList組件。

import React from 'react'; 
 
function ItemsList(props) { 
   const listItems = props.items.map(item => item.name); 
 
   return (listItems); 
} 
 
 
export default ItemsList;// @flow 
import React from 'react'; 
 
 
type Item = { 
    id: number, 
    name: string 
} 
 
type Props = { 
    items: Item[] 
} 
 
function ItemsList(props: Props) { 
    const listItems = props.items.map(item => item.name); 
 
    return (listItems); 
} 
 
 
export default ItemsList; 

運行yarn flow 會出現(xiàn)錯誤，接下來我們添加一些類型。

// @flow 
import React from 'react'; 
 
 
type Item = { 
    id: number, 
    name: string 
} 
 
type Props = { 
    items: Item[] 
} 
 
function ItemsList(props: Props) { 
    const listItems = props.items.map(item => item.name); 
 
    return (listItems); 
} 
 
 
export default ItemsList; 

重新運行yarn flow，將不會提示任何錯誤。

每次要使用 Flow 檢查文件時，我們都必須運行相同的命令。對于使用 VS Code 的用戶，可以使用Flow Language Support在每次保存后自動執(zhí)行 Flow 檢查。其他 IDE 將具有等效功能，只需搜索即可找到與您的環(huán)境相關(guān)的實現(xiàn)。

TypeScript 與 Flow 的優(yōu)缺點

TypeScript優(yōu)點：

• 不僅僅是一個類型檢查器： TypeScript向 JavaScript添加了額外的數(shù)據(jù)結(jié)構(gòu)，如Enums，來自其他語言的開發(fā)人員可能缺少這些數(shù)據(jù)結(jié)構(gòu)。它還具有接口、裝飾器和其他使其更加健壯的功能——使開發(fā)人員能夠編寫極其全面的代碼。這些功能在大型和企業(yè)風(fēng)格的項目中尤其強大。

• 由 Microsoft 開發(fā)： TypeScript 正在接收定期更新并將繼續(xù)發(fā)展?？梢钥隙ǖ卣f，在快速發(fā)展的 JavaScript 生態(tài)系統(tǒng)中，TypeScript 的壽命將比大多數(shù)其他“趨勢”更長。

• 大型社區(qū)：TypeScript 擁有一個龐大而活躍的社區(qū)，他們愿意為它的開發(fā)做出貢獻，并通過回答他們的問題或編寫有用的教程來幫助他人。除了官方文檔 之外，您還可以找到大量有關(guān) TypeScript 主題的非官方資源。

TypeScript缺點：

• 陡峭的學(xué)習(xí)曲線：TypeScript 一開始可能是嚴格且無情的，讓開發(fā)人員望而卻步。它比 Flow 更難和更復(fù)雜，因為它更健壯，并且被認為是一種編程語言(或至少是 JavaScript 的“超集”)。TypeScript 也感覺像是一種全有或全無的方法，這會使事情復(fù)雜化并減慢具有大量依賴項的大型項目的開發(fā)速度。

• 大量重復(fù)代碼：有人認為 TypeScript 沉淀了大量模板代碼，這會增加開發(fā)時間并使文件更難理解。在這種情況下，代碼極簡主義者可能更喜歡輕量級 Flow(或根本不進行類型檢查)。

Flow優(yōu)點：

• 易用性： Flow 比 TypeScript 更寬容，可作為對 JavaScript 中靜態(tài)類型的更溫和的介紹。啟動和運行速度更快，而且由于其按文件選擇加入的方法，將 Flow 添加到現(xiàn)有項目中也可能更容易。

• 由 Facebook 開發(fā)：開發(fā) React 的公司，因此您可以確定這兩種工具完全兼容并且可以一起使用。

Flow缺點：

• 更小的社區(qū)：Flow 擁有一個更小、更不活躍的社區(qū)，這意味著那些試圖學(xué)習(xí)如何使用它并調(diào)試可能出現(xiàn)的問題的人可用的資源更少。這也可能意味著它在支持和添加功能方面的未來比 TypeScript 更加不確定。

• 不那么健壯： Flow 可以很好地進行類型檢查，但僅此而已。TypeScript 可能更適合具有較長支持范圍的更多企業(yè)項目，同時考慮到開發(fā)人員可以在此類項目中使用其更高級的功能。Flow 可能是更精簡項目的更好選擇，或者作為將類型檢查引入現(xiàn)有項目的一種方式，而不會太痛苦。由您決定哪種工具最適合您的項目和環(huán)境。

結(jié)論

TypeScript 和 Flow 之間有明顯的區(qū)別。在功能方面，TypeScript 更健壯，而 Flow 只是一個類型檢查器。

盡管 Flow 是由 Facebook創(chuàng)建的，但是對于同公司開發(fā)的React框架來說，并沒有特別優(yōu)待之處，畢竟它最初的目的就不是作為react的附屬工具，而是作為一個通用項目管理工具。

對于喜歡輕量級，喜歡快速上手的人來說，flow是一個不錯的選擇，你可以非?？焖俚厝腴T并使用它。

而如果你在開發(fā)一個大型項目，那么typescript應(yīng)該是你最佳的選擇，它龐大的社區(qū)讓它的發(fā)展異常迅速，主流的框架源碼都采用了typescript進行開發(fā)足以說明問題。