Flow與Typescript：哪個(gè)更適合你的項(xiàng)目？
隨著 JavaScript 項(xiàng)目變得越來越復(fù)雜，開發(fā)者開發(fā)了新的工具和語言來提高代碼質(zhì)量和工作流程。
除了單元測(cè)試，TypeScript 和 Flow 等靜態(tài)類型檢查器正在成為專業(yè)開發(fā)團(tuán)隊(duì)的標(biāo)準(zhǔn)。無論項(xiàng)目大小，使代碼更易于理解并在開發(fā)階段捕獲錯(cuò)誤的好處已被證明是非常有用的。
在沒有使用類型檢查工具的情況下處理大型 JavaScript 代碼庫(kù)會(huì)讓你感到頭痛，特別是那些在運(yùn)行時(shí)才會(huì)發(fā)現(xiàn)的錯(cuò)誤會(huì)產(chǎn)生很多，但是當(dāng)你采用了類型檢查，或者使用了TypeScript之后，你會(huì)發(fā)現(xiàn)這些類型的錯(cuò)誤大大減少，不僅開發(fā)效率得到提高，最重要的是代碼的質(zhì)量得到了極大提升。
在本文中，主要介紹這兩個(gè)工具，并說明它們的工作方式。并且演示如何將TypeScript 和 Flow 集成到 React 應(yīng)用程序中。
TypeScript
TypeScript 是微軟開發(fā)的一種編程語言。它是開源的，并得到了一個(gè)龐大而活躍的社區(qū)的支持。
TypeScript 是 JavaScript 的類型化超集，可編譯為純 JavaScript。
“類型化”一詞表示 TypeScript 要求程序員聲明給定變量的數(shù)據(jù)類型。
“超集”一詞表示 TypeScript 允許程序員使用 JavaScript 提供的所有功能，以及一些額外的功能 ，如接口，泛型，裝飾器等。
下圖展示了 TypeScript 運(yùn)行方式的高級(jí)概述。編譯器接收 TypeScript 文件(.ts 或 .tsx)，然后將它們“轉(zhuǎn)換”為可由瀏覽器運(yùn)行的有效 JavaScript 代碼。
我們來看一些用 TypeScript 編寫的簡(jiǎn)單代碼：
- 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'.
正如我們?cè)谏厦娴拇a塊中看到的，我們聲明了一個(gè)函數(shù)，該函數(shù)接收一個(gè)具有兩個(gè)屬性的對(duì)象，分別是字符串和數(shù)字類型的名稱和年齡。調(diào)用該函數(shù)時(shí)，TypeScript 會(huì)檢查提供的對(duì)象的類型是否正確，如果類型不正確，就會(huì)像在調(diào)用第二個(gè)函數(shù)的時(shí)候代碼將無法編譯并拋出錯(cuò)誤。
Flow
與 TypeScript 相比，F(xiàn)low 并不是一種編程語言，它被叫做JavaScript 的靜態(tài)類型檢查器，類似于我們經(jīng)常使用的ESLint，它是由 Facebook開發(fā)的。
我們可以通過向常規(guī) JavaScript 文件添加特殊注釋來使用 Flow，指示我們期望的類型，或者我們可以讓工具推斷出期望的類型并在發(fā)現(xiàn)任何錯(cuò)誤時(shí)警告我們。
我們來看看以下 Flow 官方文檔的案例：
- // @flow
- function square(n) {
- return n * n; // Error!
- }
- square("2");
注意到上面代碼的第一行了嗎?為了讓工具知道它必須檢查哪些文件，我們通過添加注釋 @flow在每個(gè)要包含在 Flow 監(jiān)控過程中的文件中。
使用 Flow，您不必更改文件的擴(kuò)展名，而是繼續(xù)在帶注釋的文件.js和.jsx文件中編寫普通的 JavaScript。
如果我們保留上面的代碼，JavaScript 引擎會(huì)因?yàn)樽⑨尪鴴伋鲥e(cuò)誤，因此，作為額外的步驟，我們必須在最后編譯代碼之前刪除所有注釋。
當(dāng)然我們可以使用Babel 或者 flow-remove-types等工具來清除它們。
Flow 與 TypeScript 與 React 的集成
一個(gè)標(biāo)準(zhǔn)的 React 應(yīng)用程序
創(chuàng)建 React 應(yīng)用程序的最簡(jiǎn)單方法是使用create-react-app工具。
我們將創(chuàng)建兩個(gè)相同的 React 應(yīng)用程序，一個(gè)用于測(cè)試 TypeScript，另一個(gè)用于測(cè)試 Flow。
首先，讓我們通過創(chuàng)建一個(gè)沒有任何類型檢查的 React 應(yīng)用程序來看看這個(gè)工具的實(shí)現(xiàn)：
- npx create-react-app demo-app
React啟用TypeScript
如果我們從頭開始，我們可以像這樣使用 –template 標(biāo)志來創(chuàng)建一個(gè)支持 TypeScript 的 React 應(yīng)用程序：
- npx create-react-app react-ts --template typescript
對(duì)于一個(gè)新項(xiàng)目這是一個(gè)最佳的辦法，如果我們想要在現(xiàn)有的項(xiàng)目中啟用react的話，我們需要做下面的操作。
- yarn add typescript @types/node @types/react @types/react-dom @types/jest
接下來，我們將現(xiàn)有的.js和.jsx文件重命名為.ts和.tsx。
重啟我們的開發(fā)服務(wù)器之后，你會(huì)發(fā)現(xiàn)項(xiàng)目目錄中多了一個(gè)tsconfig.json文件，這個(gè)文件是typescript的配置文件，你可以對(duì)它進(jìn)行一些偏好配置。
然后我們創(chuàng)建一個(gè)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 允許我們使用接口聲明我們期望的對(duì)象類型。
在這里，我們聲明了 Props 接口，它有一個(gè)屬性 item，一個(gè) Item 類型的對(duì)象數(shù)組——另一個(gè)接口有兩個(gè)屬性，一個(gè) number 類型的 id 和一個(gè) string 類型的 name，兩者都是必需的。
然后，我們通過添加注解 props：Props 說我們的函數(shù)組件 ItemsList 的 props 參數(shù)是一個(gè) Props 類型的對(duì)象。
讓我們ItemsList在我們的App.tsx文件中實(shí)現(xiàn)這個(gè)組件并聲明一個(gè)名為 items 的常量，就像一個(gè)包含虛擬對(duì)象的數(shù)組一樣，看看 TypeScript 是如何反應(yīng)的：
您可以看到顯示了一個(gè)錯(cuò)誤，指出 Item 必須包含 id 和 name 屬性。如果我們此時(shí)嘗試運(yùn)行應(yīng)用程序，TypeScript 可以避免我們產(chǎn)生錯(cuò)誤。
現(xiàn)在讓我們刪除我們的項(xiàng)目 const 的類型，看看這個(gè)錯(cuò)誤是否消失：即使我們沒有聲明項(xiàng)目 const 應(yīng)該是 type Item[]，TypeScript 也足夠聰明，可以發(fā)現(xiàn)在我們的ItemsList組件中使用它是不安全的。
現(xiàn)在讓我們通過向組件添加兩個(gè)適當(dāng)?shù)挠涗泚斫鉀Q這個(gè)問題：
- const items: Item[] = [{ id: 1, name: "One" },{ id: 2, name: "Two" }];
我們現(xiàn)在看到應(yīng)用程序編譯并成功執(zhí)行：通過引入TypeScript，我們避免了運(yùn)行潛在錯(cuò)誤的代碼，同時(shí)還通過顯式聲明整個(gè)應(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;
運(yùn)行yarn flow 會(huì)出現(xiàn)錯(cuò)誤，接下來我們添加一些類型。
- // @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;
重新運(yùn)行yarn flow，將不會(huì)提示任何錯(cuò)誤。
每次要使用 Flow 檢查文件時(shí)，我們都必須運(yùn)行相同的命令。對(duì)于使用 VS Code 的用戶，可以使用Flow Language Support在每次保存后自動(dòng)執(zhí)行 Flow 檢查。其他 IDE 將具有等效功能，只需搜索即可找到與您的環(huán)境相關(guān)的實(shí)現(xiàn)。
TypeScript 與 Flow 的優(yōu)缺點(diǎn)
TypeScript優(yōu)點(diǎn)：
- 不僅僅是一個(gè)類型檢查器： TypeScript向 JavaScript添加了額外的數(shù)據(jù)結(jié)構(gòu)，如Enums，來自其他語言的開發(fā)人員可能缺少這些數(shù)據(jù)結(jié)構(gòu)。它還具有接口、裝飾器和其他使其更加健壯的功能——使開發(fā)人員能夠編寫極其全面的代碼。這些功能在大型和企業(yè)風(fēng)格的項(xiàng)目中尤其強(qiáng)大。
- 由 Microsoft 開發(fā)： TypeScript 正在接收定期更新并將繼續(xù)發(fā)展?？梢钥隙ǖ卣f，在快速發(fā)展的 JavaScript 生態(tài)系統(tǒng)中，TypeScript 的壽命將比大多數(shù)其他“趨勢(shì)”更長(zhǎng)。
- 大型社區(qū)：TypeScript 擁有一個(gè)龐大而活躍的社區(qū)，他們?cè)敢鉃樗拈_發(fā)做出貢獻(xiàn)，并通過回答他們的問題或編寫有用的教程來幫助他人。除了官方文檔 之外，您還可以找到大量有關(guān) TypeScript 主題的非官方資源。
TypeScript缺點(diǎn)：
- 陡峭的學(xué)習(xí)曲線：TypeScript 一開始可能是嚴(yán)格且無情的，讓開發(fā)人員望而卻步。它比 Flow 更難和更復(fù)雜，因?yàn)樗?，并且被認(rèn)為是一種編程語言(或至少是 JavaScript 的“超集”)。TypeScript 也感覺像是一種全有或全無的方法，這會(huì)使事情復(fù)雜化并減慢具有大量依賴項(xiàng)的大型項(xiàng)目的開發(fā)速度。
- 大量重復(fù)代碼：有人認(rèn)為 TypeScript 沉淀了大量模板代碼，這會(huì)增加開發(fā)時(shí)間并使文件更難理解。在這種情況下，代碼極簡(jiǎn)主義者可能更喜歡輕量級(jí) Flow(或根本不進(jìn)行類型檢查)。
Flow優(yōu)點(diǎn)：
- 易用性： Flow 比 TypeScript 更寬容，可作為對(duì) JavaScript 中靜態(tài)類型的更溫和的介紹。啟動(dòng)和運(yùn)行速度更快，而且由于其按文件選擇加入的方法，將 Flow 添加到現(xiàn)有項(xiàng)目中也可能更容易。
- 由 Facebook 開發(fā)：開發(fā) React 的公司，因此您可以確定這兩種工具完全兼容并且可以一起使用。
Flow缺點(diǎn)：
- 更小的社區(qū)：Flow 擁有一個(gè)更小、更不活躍的社區(qū)，這意味著那些試圖學(xué)習(xí)如何使用它并調(diào)試可能出現(xiàn)的問題的人可用的資源更少。這也可能意味著它在支持和添加功能方面的未來比 TypeScript 更加不確定。
- 不那么健壯： Flow 可以很好地進(jìn)行類型檢查，但僅此而已。TypeScript 可能更適合具有較長(zhǎng)支持范圍的更多企業(yè)項(xiàng)目，同時(shí)考慮到開發(fā)人員可以在此類項(xiàng)目中使用其更高級(jí)的功能。Flow 可能是更精簡(jiǎn)項(xiàng)目的更好選擇，或者作為將類型檢查引入現(xiàn)有項(xiàng)目的一種方式，而不會(huì)太痛苦。由您決定哪種工具最適合您的項(xiàng)目和環(huán)境。
結(jié)論
TypeScript 和 Flow 之間有明顯的區(qū)別。在功能方面，TypeScript 更健壯，而 Flow 只是一個(gè)類型檢查器。
盡管 Flow 是由 Facebook創(chuàng)建的，但是對(duì)于同公司開發(fā)的React框架來說，并沒有特別優(yōu)待之處，畢竟它最初的目的就不是作為react的附屬工具，而是作為一個(gè)通用項(xiàng)目管理工具。
對(duì)于喜歡輕量級(jí)，喜歡快速上手的人來說，flow是一個(gè)不錯(cuò)的選擇，你可以非?？焖俚厝腴T并使用它。
而如果你在開發(fā)一個(gè)大型項(xiàng)目，那么typescript應(yīng)該是你最佳的選擇，它龐大的社區(qū)讓它的發(fā)展異常迅速，主流的框架源碼都采用了typescript進(jìn)行開發(fā)足以說明問題。
