JavaScript 是一種弱類型（或稱動(dòng)態(tài)類型）語言，即變量的類型是不確定的。

x = 5; // 5x = x + ’A’; // ’5A’

上面代碼中，變量x起先是一個(gè)數(shù)值，后來是一個(gè)字符串，類型完全由當(dāng)前的值決定，這就叫弱類型。

弱類型的好處是十分靈活，可以寫出非常簡(jiǎn)潔的代碼。但是，對(duì)于大型項(xiàng)目來說，強(qiáng)類型更有利，可以降低系統(tǒng)的復(fù)雜度，在編譯時(shí)就發(fā)現(xiàn)類型錯(cuò)誤，減輕程序員的負(fù)擔(dān)。

一直有人嘗試，讓 JavaScript 變成強(qiáng)類型語言。在官方最終支持強(qiáng)類型之前，本文介紹三種現(xiàn)在就可用的解決方案。

TypeScript 是微軟2012年推出的一種編程語言，屬于 JavaScript 的超集，可以編譯為 JavaScript 執(zhí)行。 它的最大特點(diǎn)就是支持強(qiáng)類型和 ES6 Class。

首先，安裝TypeScript。

$ npm install -g typescript

然后，為變量指定類型。

// greet.tsfunction greet(person: string) { console.log('Hello, ' + person);}greet([0, 1, 2]);

上面是文件 greet.ts 的代碼，后綴名 ts 表明這是 TypeScript 的代碼。函數(shù) greet 的參數(shù)，聲明類型為字符串，但在調(diào)用時(shí)，傳入了一個(gè)數(shù)組。

使用 tsc 命令將 ts 文件編譯為 js 文件，就會(huì)拋出類型不匹配的錯(cuò)誤。

$ tsc greeter.tsgreet.ts(5,9): error TS2345: Argument of type ’number[]’ is not assignable to parameter of type ’string’.　二、Flowcheck

Flowcheck 是一個(gè)輕量級(jí)的類型斷言庫(kù)，可以在運(yùn)行時(shí)（runtime）檢查變量類型是否正確。

首先，安裝Flowcheck。

$ npm install -g flowcheck

然后，編寫一個(gè)聲明了變量類型的腳本。

function sum(a: number, b: number) { return a + b;}sum(’hello’,’world’)

接著，使用下面的命令，將腳本轉(zhuǎn)換為正常的 JavaScript 文件。

$ browserify -t flowcheck -t [reactify --strip-types] input.js -o output.js

轉(zhuǎn)換后的文件如下。

var _f = require('flowcheck/assert');function sum(a, b) { _f.check(arguments, _f.arguments([_f.number, _f.number])); return a + b;}

可以看到，代碼中插入一個(gè)斷言庫(kù)。每次運(yùn)行函數(shù)之前，會(huì)先執(zhí)行斷言，如果類型不符就報(bào)錯(cuò)。

$ node output.js// throw new TypeError(message); ^TypeError: Expected an instance of number got 'hello', context: arguments / [number, number] / 0Expected an instance of number got 'world', context: arguments / [number, number] / 1　三、Flow

Flow 是 Facebook 在2014年發(fā)布的一個(gè)類型檢查工具，用來檢查 React 的源碼。

安裝命令如下。

$ npm install --global flow-bin

如果安裝不成功（我就是如此），就需要自己從源碼編譯了。

Flow 的用法很多，我只舉幾個(gè)例子。前文介紹的兩種工具，只能檢查聲明了類型的變量，而 Flow 可以推斷變量類型。

// hello.js/* @flow */function foo(x) { return x*10;}foo('Hello, world!');

上面是文件 hello.js ，該文件的第一行是注釋，表明需要使用 Flow 檢查變量類型。

$ flow checkhello.js:7:5,19: stringThis type is incompatible with/hello.js:4:10,13: number

運(yùn)行 flow check 命令，得到報(bào)錯(cuò)信息：預(yù)期函數(shù) foo 的參數(shù)是一個(gè)數(shù)值，但是實(shí)際為一個(gè)字符串。

Flow 也支持變量的類型聲明。

/* @flow */function foo(x: string, y: number): string { return x.length * y;}foo('Hello', 42);

另一個(gè)有趣的功能是，F(xiàn)low 可以將類型注釋（annotation），轉(zhuǎn)為類型聲明。

// annotation.js/** @param {number} x @return {number} */function square(x) { return x * x;}square(5);

運(yùn)行 flow port 命令，會(huì)得到下面的結(jié)果。

$ flow port annotation.jsfunction square(x: number) : number { return x * x; }

Flow 的更多介紹，可以閱讀《Exploring Flow, Facebook’s Type Checker for JavaScript》。

本文的原始幻燈片點(diǎn)擊這里（里面有更多內(nèi)容）。