JavaScript 是一種弱類型(或稱動態(tài)類型)語言,即變量的類型是不確定的。
x = 5; // 5 x = x + 'A'; // '5A'
上面代碼中,變量x起先是一個數(shù)值,后來是一個字符串,類型完全由當(dāng)前的值決定,這就叫弱類型。
弱類型的好處是十分靈活,可以寫出非常簡潔的代碼。但是,對于大型項目來說,強類型更有利,可以降低系統(tǒng)的復(fù)雜度,在編譯時就發(fā)現(xiàn)類型錯誤,減輕程序員的負(fù)擔(dān)。
一直有人嘗試,讓 JavaScript 變成強類型語言。在官方最終支持強類型之前,本文介紹三種現(xiàn)在就可用的解決方案。
一、TypeScript
TypeScript 是微軟2012年推出的一種編程語言,屬于 JavaScript 的超集,可以編譯為 JavaScript 執(zhí)行。 它的最大特點就是支持強類型和 ES6 Class。
首先,安裝TypeScript。
$ npm install -g typescript
然后,為變量指定類型。
// greet.ts
function greet(person: string) {
console.log("Hello, " + person);
}
greet([0, 1, 2]);
上面是文件 greet.ts 的代碼,后綴名 ts 表明這是 TypeScript 的代碼。函數(shù) greet 的參數(shù),聲明類型為字符串,但在調(diào)用時,傳入了一個數(shù)組。
使用 tsc 命令將 ts 文件編譯為 js 文件,就會拋出類型不匹配的錯誤。
$ tsc greeter.ts greet.ts(5,9): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
二、Flowcheck
Flowcheck 是一個輕量級的類型斷言庫,可以在運行時(runtime)檢查變量類型是否正確。
首先,安裝Flowcheck。
$ npm install -g flowcheck
然后,編寫一個聲明了變量類型的腳本。
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;
}
可以看到,代碼中插入一個斷言庫。每次運行函數(shù)之前,會先執(zhí)行斷言,如果類型不符就報錯。
$ node output.js
// throw new TypeError(message);
^
TypeError:
Expected an instance of number got "hello",
context: arguments / [number, number] / 0
Expected an instance of number got "world",
context: arguments / [number, number] / 1
三、Flow
Flow 是 Facebook 在2014年發(fā)布的一個類型檢查工具,用來檢查 React 的源碼。
安裝命令如下。
$ npm install --global flow-bin
如果安裝不成功(我就是如此),就需要自己從源碼編譯了。
Flow 的用法很多,我只舉幾個例子。前文介紹的兩種工具,只能檢查聲明了類型的變量,而 Flow 可以推斷變量類型。
// hello.js
/* @flow */
function foo(x) {
return x*10;
}
foo("Hello, world!");
上面是文件 hello.js ,該文件的第一行是注釋,表明需要使用 Flow 檢查變量類型。
$ flow check hello.js:7:5,19: string This type is incompatible with /hello.js:4:10,13: number
運行 flow check 命令,得到報錯信息:預(yù)期函數(shù) foo 的參數(shù)是一個數(shù)值,但是實際為一個字符串。
Flow 也支持變量的類型聲明。
/* @flow */
function foo(x: string, y: number): string {
return x.length * y;
}
foo("Hello", 42);
另一個有趣的功能是,F(xiàn)low 可以將類型注釋(annotation),轉(zhuǎn)為類型聲明。
// annotation.js
/**
@param {number} x
@return {number}
*/
function square(x) {
return x * x;
}
square(5);
運行 flow port 命令,會得到下面的結(jié)果。
$ flow port annotation.js
function square(x: number) : number {
return x * x;
}
Flow 的更多介紹,可以閱讀《Exploring Flow, Facebook's Type Checker for JavaScript》。
本文的原始幻燈片點擊這里(里面有更多內(nèi)容)。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無需額外費用,即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。
