Flow Guide for Beginners

FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.

1. 安裝

2. 使用指南

2.1 基本使用

安裝完成後執行 flow init 會自動生成一個 .flowconfig 文件，這個文件告訴 Flow 須要檢測根目錄以及全部子目錄的代碼。（.flowconfig 有一些高級配置在下面的章節會講到。）

$> mkdir new_project $> cd new_project $> flow init

有了配置文件，咱們就能夠使用下面的指令檢測代碼了：

$> flow check # 全量檢查 $> flow # 開啓一個後臺服務，輸出首次檢測結果，當發生修改時，再次運行 flow 會增量地檢查文件 $> flow stop # 代碼寫完，關閉服務

對於須要使用 flow 進行類型檢查的 js 文件，在開頭加入 @flow 註釋。

/* @flow */ /* @flow weak */ 只對有加類型註解的變量進行類型檢測

無論有沒有 @flow 註釋，均可以使用 flow check --all 強制檢查全部文件。

2.2 類型註解

function concat(a, b) {   return a + b; } concat("A", "B"); // Works! concat(1, 2); // Works! // @flow function concat(a: string, b: string) {   return a + b; } concat("A", "B"); // Works! concat(1, 2); // Error!

2.2.1 基本數據類型

• Booleans
• Strings
• Numbers
• null
• undefined (void in Flow types)
• Symbols (new in ECMAScript 2015, not yet supported in Flow)

2.2.2 字面量類型

// @flow function getColor(name: "success" | "warning" | "danger") {   switch (name) {     case "success" : return "green";     case "warning" : return "yellow";     case "danger" : return "red";   } } getColor("success"); // Works! getColor("danger"); // Works! // $ExpectError getColor("error"); // Error!

2.2.3 Mixed Types

function stringifyBasicValue(value: string | number | boolean) {   return '' + value; }

2.2.4 Any Types

應該儘量避免，可是在作項目遷移時，能夠使用 any 作平穩過渡。——能用 mixed 就不用 any。

2.2.5 Maybe Types

// @flow function acceptsMaybeNumber(value: ?number) {   // ... } acceptsMaybeNumber(42); // Works! acceptsMaybeNumber(); // Works! acceptsMaybeNumber(undefined); // Works! acceptsMaybeNumber(null); // Works! acceptsMaybeNumber("42"); // Error!

2.2.6 Variable Types

var varVariable = 1; let letVariable = 1; const constVariable = 1; varVariable = 2; // Works! letVariable = 2; // Works! // $ExpectError constVariable = 2; // Error!

2.2.7 Function Types

主要概念：參數、函數返回值、可選參數、rest 參數。

let method = (str: string, bool?: boolean, ...nums: Array<number>): void => { // ... };

2.2.8 Object Types

// @flow var obj = { foo: "bar" }; // $ExpectError obj.bar; // Error!(not undefined)

sealed object 不容許被添加新屬性。

// @flow var obj = {   foo: 1 }; // $ExpectError obj.bar = true; // Error! // $ExpectError obj.baz = 'three'; // Error!

若是對象在建立時沒有任何屬性，那麼它就是 unsealed object，容許添加屬性。若是 flow 能推斷出這個屬性的類型，就給他指明類型，不然，給他全部可能的類型。

// @flow var obj = {}; obj.foo = 1; // Works! obj.bar = true; // Works! obj.baz = 'three'; // Works! // @flow var obj = {}; obj.prop = true; obj.prop = "hello"; // $ExpectError var val1: boolean = obj.prop; // Error! var val2: string = obj.prop; // Works! // @flow var obj = {}; if (Math.random()) obj.prop = true; else obj.prop = "hello"; // $ExpectError var val1: boolean = obj.prop; // Error! // $ExpectError var val2: string = obj.prop; // Error! var val3: boolean | string = obj.prop; // Works!

2.2.9 Array Types

let arr1: Array<boolean> = [true, false, true]; let arr2: Array<string> = ["A", "B", "C"]; let arr3: Array<mixed> = [1, true, "three"];

2.2.10 其餘 types

除了上面介紹的類型，還有不少其餘的 types，能夠直接去官網查看。

• Tuple Types
• Class Types
• Type Aliases
• Interface Types
• Generic Types
• Union Types
• Intersection Types
• Typeof Types
• Type Casting Expressions
• Utility Types
• Module Types
• Comment Types

2.3 幾個例子

$> npm clone https: //github.com/facebook/flow.git $> cd flow/examlpes $> flow

2.4 命令行工具

相似npm

$> flow --help $> flow cmd --help

2.5 高級配置

• [include]
• [ignore] (ignore > include)
• [libs]
• [options]
• [version]

[include] ../externalFile.js ../externalDir/ [ignore] .*/build/.* [libs] ./lib [options] module.system.node.resolve_dirname=node_modules module.use_strict=true [version] 0.22.0

2.6 第三方模塊調用

通常來講，咱們不想去檢測第三方模塊的代碼，官方推薦的作法是使用 flow-typed。

若是在 flow-typed 中找不到定義好的模塊，也能夠本身本身寫。

// Declaring A Global Function declare function foo(a: number): string; // Declaring A Global Class declare class URL {   constructor(urlStr: string): URL;   toString(): string;   static compare(url1: URL, url2: URL): boolean; }; // Declaring A Global Variable declare var PI: number; // Declaring A Global Type declare type UserID = number; // Declaring A Module declare module "some-third-party-library" {   // This is where we'll list the module's exported interface(s) } // Declaring An ES Module declare module "some-es-module" {   // Declares a named "concatPath" export   declare export function concatPath(dirA: string, dirB: string): string; } // Declaring A CommonJS Module declare module "some-commonjs-module" {   // The export of this module is an object with a "concatPath" method   declare module.exports: {     concatPath(dirA: string, dirB: string): string;   }; }

3. 工具

3.1 babel

$> npm install --save-dev babel-preset-flow

{   "presets": ["flow"] }

3.2 eslint

npm.taobao.org/package/esl…

4. 框架

4.1 Flow + React
4.2 Flow + Redux

5. IDE

• Atom
• Sublime Text
• Vim
• Emacs
• Visual Studio Code
• WebStorm

6. 老項目遷移

1. 業務代碼先使用 @flow weak ，改完以後再改成 @flow
2. 儘可能使用 flow-typed，若是找不到就本身定義
3. 對null特殊處理

7. 和TS比較

	flow	typescript
slogan	A static type checker for JavaScript	JavaScript that scales
開發者	Facebook	微軟
相關技術	React	Angular
star	1w+	2w+
文檔	少	多
第三方庫支持	弱 (flow-typed)	強 (tsd)
IDE支持	弱	強
其餘	自由度高，老項目遷移比較方便	工程化強，適合新項目、大項目