Flow, 一個新的Javascript靜態類型檢查器

liangzai_cool 發布于2019-08-19 17:15 / 3041人閱讀

摘要：原文鏈接翻譯于今天我們興奮的發布了的嘗鮮版，一個新的靜態類型檢查器。為添加了靜態類型檢查，以提高開發效率和代碼質量。這最終形成一個高度并行增量式的檢查架構，類似。知道縮小類型范圍時做動態檢查的影響。

原文鏈接：https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/

Avik Chaudhuri Basil Hosmer Gabriel Levi

caisijie 翻譯于 2015/12/21

今天我們興奮的發布了Flow的嘗鮮版，一個新的Javascript靜態類型檢查器。Flow為Javascript添加了靜態類型檢查，以提高開發效率和代碼質量。更明確的說，靜態類型檢查提供的好處像早期錯誤檢查，幫助你發現一些只有在運行時才能發現的錯誤，以及代碼智能感知，它會幫助代碼維護，查找，重構和優化。

我們設計Flow的所有功能構建在現有Javascript規范之上。因為Flow主動地在后臺工作，所以額外的編譯開銷很小。Flow并不要求開發者如何編寫代碼 —— 她用一套復雜的算法分析你熟悉的代碼風格。

Flow仍然在初期階段，但是我們已經在Facebook使用了。我們希望你在自己的項目中愉快的使用，期待你的反饋。可以訪問flowtype.org快速開始。

總覽

Facebook超愛Javascript；它快，表達性好，而且到處運行，是構建產品的極佳語言。同時，因為沒有靜態類型讓開發者困擾。Bug難以發現（比如，崩潰的原因隱藏很深），代碼維護猶如噩夢（比如，在不知道所有依賴的情況下進行重構風險很大）。Flow改進了速度和效率促進了開發者在使用Javascript的生成效率。

在Javascript之上添加一層靜態系統并不簡單。Javascript的積木（building block）表現力極高，一個簡單的類型系統并不能精確組合出應有的語義。為了支持不同的Javascript編程范式和習慣，Flow引入了類似數據流（data-flow）和控制流（control-flow）這類通常用于編譯時提取語義的分析技術。然后用提取的信息，加上先進的類型原理來做類型推斷。當然，僅有一個強力的靜態類型分析還不夠 —— Javascript代碼庫會很大，這要求類型檢查必須閃電般快速，才能不打斷開發者編輯-運行的流程。Flow按模塊執行分析，所有的類型都限制在模塊邊界以內。這最終形成一個高度并行、增量式的檢查架構，類似Hack。這使得類型檢查響應快速，即使是百萬行級別代碼。

Flow的類型檢查是選擇性的 —— 你不需要一次性執行檢查所有。然而，Flow背后的設計基于假定大多數Javascript的代碼類型是隱式靜態類型；雖然類型可能不會到處在代碼中出現，它們是以一種可以按照代碼正確性推理出來的形式存在于開發者的思路中。一旦可能，Flow就去推斷這些類型，意味著它可以不需要改動代碼就能發現類型錯誤。另一發面，一些如存在于框架中的Javascript代碼，大量使用了反射使得靜態類型推斷非常困難。對于這種天然動態的代碼，類型檢查就會錯漏百出，因此Flow提供對此類代碼添加信任并繼續。這種設計在Facebook內部被大量的Javascript代碼庫所驗證：大多數代碼沒有通過隱式靜態類型檢查條目，這些條目讓開發者可以不用添加注釋就能檢查代碼類型錯誤。

這使得Flow從根本上區別于其他Javascript的類型系統（如TypeScript），通過弱化的假設大多數JavaScript代碼是動態輸入的，并由開發者自己表達哪些代碼應該是靜態類型。通常來看，這類設計會導致檢查覆蓋率降低：更少的類型錯誤被檢測到，工具不夠高效。然而對于某些情況下是合理的，一般這種設計如果沒有通過大量額外的努力就無法對實際開發提供足夠多的幫助。盡管如此，Flow讓你可以簡單就獲得這種弱化的類型檢查，對于現有代碼非常有用。

為了解釋這種區別，請看下面的例子：

function onlyWorksOnNumbers(x) {
  return x * 10;
}
onlyWorksOnNumbers(‘Hello, world!’);

Flow能夠發現這個錯誤（嘗試把數字和字符串相乘），然而另一種更加保守的分析需要顯式的標注x的類型。在這個玩具般的例子里面并不覺得費力，但是在巨型代碼庫里面幾乎無人去做。Flow可以不用添加注釋就能發現這個錯誤 —— 當然前提是開發者想這樣做。

類型系統

Flow的類型系統實現了許多期望中的功能。支持標準基本類型(number,?string,boolean)，類型之間的隱式轉換在除一些特殊情形外是被禁止的。結構類型，如函數、對象和數組也被支持。類型可以是多態的。

也許你會感到意外，Flow沒有把null和undefined當成是上述類型中的任何一種。這兩種類型會有多種可能，使用這些類型必須在合理檢查的保護之上。其它組合類型（如 string | number）也被支持，這種用法同樣需要確保安全。Flow知道縮小類型范圍時做動態檢查的影響。

讓我們用一個例子來描述處理null值。下面的程序總是在運行時崩潰，但是一般的類型系統會認為它沒有問題：

function length(x) {
return x.length;
}
var total = length("Hello") + length(null);

Flow會在編譯時期發現這個錯誤，并指出x可以是null（length屬性不應該被訪問）。另外，Flow了解這個程序的控制流，所以簡單修改就能讓這個程序類型正確：

function length(x) {
  if (x !== null) {
    return x.length;
  } else {
    return 0;
  }
}
var total = length("Hello") + length(null);

Flow還了解JavaScript復雜的對象模型：構造器，方法，原型和它們動態擴展以及綁定。已經試驗性去支持類型的復雜操作如：綁定對象，抽取keys等等。我們希望未來這些功能使得讓為框架指定具體類型成為可能。

類型錯誤通常報告為定義和實際值不兼容：比如函數調用的參數不足，對象中不包含要訪問的屬性，或者把字符串當成數字使用。

最后，Flow支持動態類型（any)，這種類型可以繞過類型系統檢查：比如可用any表示靜態分析無法準確判斷而報錯的location（通常使用反射的情況）。另外Flow在弱模式下遇到上述類型且沒有注釋類型的話，會自動假定為any。
更多關于類型系統可以查看?documentation.

擴展性

為了拓展，Flow根據模塊和其它模塊的依賴關系以及其它模塊提供的類型接口，多帶帶對每個模塊進行檢查。要生成類型接口，Flow可能需要在模塊邊界上進行注釋。

Flow在一個后臺運行的持久化服務器上，維護著整個代碼庫的語義信息，一開始Flow會對整個代碼做一次分析，然后當一系列文件改動的時候（可能是單個文件改動或者在切換分支的時候），服務器會增量式更新改動文件以及由于類型關聯的其它相關文件的語義信息。這樣，當開發者試圖獲取類型錯誤時，它們已經在服務器上了，相應幾乎是立即的。這種服務器架構與Hack構建在同一種技術之上。

兼容性

Flow致力于支持最新的JavaScript標準。目前已經支持各種ES6特性如destructuring, classes, extended objects, optional function parameters，以及核心API擴展（比如Map, Set, Promise, 和 new methods on Object, Array, 和 Math)。其它特性（尤其是模塊）正在開發中。Flow支持CommonJS / Node.js 規范的模塊。

var Hello = React.createClass ({
 render: function() {
   return Hello {this.props.name};
 }
});

如果你在JSX上使用的class名字有錯誤，Flow會發現這個問題：
React.render(, ...);

而且，如果你在React class里面使用了React.PropTypes規范，你可以對JSX上的attributes做靜態類型檢查：

var Hello = React.createClass ({
  propTypes: {
    name: React.PropTypes.string.isRequired
  }
  ...
});

Flow就會發現缺少屬性的錯誤，或者屬性類型的錯誤。

更多的關于支持React的細節可以在文檔中找到。

開源

Flow代碼大部分用OCaml實現。代碼庫在活躍更新并且會在未來幾個月快速進化。除了在Facebook范圍內的數據代碼庫中運行外，我們希望Flow的分析引擎能用于構建類似的，無論是JavaScript或者其他的語言工具。請讓我們知道你是否想加入！
想了解更多關于Flow，下載它試試吧，查看?flowtype.org。

GPU云服務器云服務器靜態類型檢查購買一個新的主機靜態代碼檢查 java靜態檢查

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78346.html

Flow - JS靜態類型檢查工具

摘要：介紹是個的靜態類型檢查工具，由出品的開源碼項目，問世只有一年多，是個相當年輕的項目。現在，提供了另一個新的選項，它是一種強靜態類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強制...

seanHai 2019-08-20 13:39 評論0 收藏0
JS 靜態類型檢查工具 Flow

摘要：本文主要介紹了解決作為弱類型語言沒有類型檢查痛點的靜態類型檢查工具，并且介紹了在中使用的方法，最后介紹了一些常用的語法。本文主要介紹了解決JS作為弱類型語言沒有類型檢查痛點的靜態類型檢查工具 Flow ，并且介紹了在WebStorm中使用Flow的方法，最后介紹了一些常用的Flow語法。 1. 簡介 JS作為一種腳本語言是沒有類型檢測的，這個特點有時候用著很方便，但在一個較大的項目中...

CloudDeveloper 2019-08-22 16:17 評論0 收藏0
JavaScript類型檢查之Flow

摘要：一是一種弱類型動態類型檢查的語言。動態類型與靜態類型的核心區別動態類型的類型檢查是是在代碼運行的時候進行的，靜態類型的類型檢查則是在編譯時進行。一、js是一種弱類型、動態類型檢查的語言。弱類型：在定義變量時，可以為變量定義復制任何數據，變量的數據類型不是固定死的，這樣的類型叫做弱類型。 var a = 10; a = abc; a = []; a = function() {}...

zhonghanwen 2019-08-23 18:41 評論0 收藏0
webpack實戰

摘要：和類似的預處理器還有等。的用處非常多，包括給自動加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會成為預處理器的最終贏家。 webpack實戰查看所有文檔頁面：全棧開發，獲取更多信息。快馬加鞭，加班加點，終于把這個文檔整理出來了，順便深入地學習一番，鞏固知識，就是太累人，影響睡眠時間和質量。極客就是想要把事情做到極致，開始了就必須到達終點。原文鏈接：webpack實戰，原...

cyrils 2019-08-22 17:32 評論0 收藏0
vue2.0項目配置flow類型檢查

摘要：在的項目中加入類型檢查。當前項目是用寫的，當項目越來越大，由于弱類型的特性，相比這種強類型的語言而言，后期維護會越來越困難。為了解決這個問題，決定使用加入類型檢查。一了解是公布的靜態類型檢查器。中配置配置，使其支持語法。在vue2.0的項目中加入flow類型檢查。當前項目是用js寫的，當項目越來越大，由于js弱類型的特性，相比ts(typescript)這種強類型的語言而言，后期維護...

Rocko 2019-08-20 16:01 評論0 收藏0