前端進(jìn)階（5） - js 擴(kuò)展：靜態(tài)類型檢查（facebook flow）

孫淑建發(fā)布于2019-08-23 11:26 / 661人閱讀

摘要：擴(kuò)展靜態(tài)類型檢查語(yǔ)言與系列等語(yǔ)言有一點(diǎn)很大的不同，就是語(yǔ)言是弱類型語(yǔ)言。但其實(shí)很多開(kāi)發(fā)人員還是比較喜歡用來(lái)開(kāi)發(fā)項(xiàng)目，所以開(kāi)發(fā)出來(lái)幫助語(yǔ)言擴(kuò)展靜態(tài)類型檢查功能，規(guī)避上面提到的問(wèn)題。

js 擴(kuò)展：靜態(tài)類型檢查（facebook flow）

js 語(yǔ)言與 java、C 系列等語(yǔ)言有一點(diǎn)很大的不同，就是 js 語(yǔ)言是弱類型語(yǔ)言。js 語(yǔ)言的這個(gè)特性可能讓大家覺(jué)得 js 很自由，沒(méi)有強(qiáng)制性的約束，但是當(dāng)遇到大型項(xiàng)目的時(shí)候，js 的這個(gè)特性就會(huì)變得比較麻煩，因?yàn)檫@會(huì)導(dǎo)致團(tuán)隊(duì)的代碼很不可控。這個(gè)原因也是促使 TypeScript 誕生的一個(gè)很重要的原因。

但其實(shí)很多開(kāi)發(fā)人員還是比較喜歡用 js 來(lái)開(kāi)發(fā)項(xiàng)目，所以 facebook 開(kāi)發(fā)出 flow 來(lái)幫助 js 語(yǔ)言擴(kuò)展靜態(tài)類型檢查功能，規(guī)避上面提到的問(wèn)題。

1. 代碼示例

flow 規(guī)定，在需要做 "flow 靜態(tài)類型檢查" 文件的開(kāi)頭加上 // @flow 這段注釋，讓工具識(shí)別這個(gè)文件需要做靜態(tài)類型檢查，否則就會(huì)當(dāng)作一般 js 文件對(duì)待，不做靜態(tài)類型檢查。

flow 靜態(tài)類型幾乎可以應(yīng)用到所有的 js 對(duì)象，包括 es6 擴(kuò)展的 class, module 等，也包括 jsx 語(yǔ)法。

以下是一些基礎(chǔ)的靜態(tài)類型舉例，更詳細(xì)的可以查看 Type Annotations | Flow.

1.1 基本類型

與 js 的基本數(shù)據(jù)類型類似，包括:

boolean: 對(duì)應(yīng) js 的 Boolean 類型

number: 對(duì)應(yīng) js 的 Number 類型

string: 對(duì)應(yīng) js 的 String 類型

null: 對(duì)應(yīng) js 的 null

void: 對(duì)應(yīng) js 的 undefined

正常的 js 代碼

let hello = "hello"; // 聲明一個(gè)變量

hello = 2 * 2; // 重新賦值

hello = []; // 重新賦值

加上 flow 靜態(tài)類型檢查擴(kuò)展的代碼

// @flow

let hello: string = "hello"; // 聲明一個(gè) string 類型的變量

hello = 2 * 2; // 報(bào)錯(cuò)

hello = []; // 報(bào)錯(cuò)

hello = "hi"; // 重新賦值

1.2 函數(shù)

正常的 js 代碼

function plus(a, b) {
  return a + b;
}

plus(); // NaN
plus(1); // NaN
plus(1, 2); // 3
plus("hello"); // "helloundefined"
plus("hello", " hi"); // "hello hi"
plus({}, {}); // "[object Object][object Object]"

加上 flow 靜態(tài)類型檢查擴(kuò)展的代碼

// @flow

// 定義一個(gè) "兩個(gè)數(shù)字參數(shù)，返回值也是數(shù)字" 的函數(shù)
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 報(bào)錯(cuò)
plus(1); // 報(bào)錯(cuò)
plus("hello"); // 報(bào)錯(cuò)
plus("hello", " hi"); // 報(bào)錯(cuò)
plus({}, {}); // 報(bào)錯(cuò)

plus(1, 2); // 3

1.3 可能（Maybe），可選（Optional），語(yǔ)義（Literal），混合（Mixed）

可能（Maybe）類型用一個(gè) ? 在類型前面表示，包含類型本身、null、undefined

// @flow

let hello: ?string; // 聲明一個(gè)數(shù)據(jù)類型可以是 string, null, undefined 的變量

hello = null; // 賦值
hello = undefined; // 重新賦值
hello = "hello"; // 重新賦值
hello = 1; // 報(bào)錯(cuò)
hello = true; // 報(bào)錯(cuò)

可選（Optional）類型一般用于對(duì)象屬性或者函數(shù)參數(shù)，在名稱后面加一個(gè) ?，包含類型本身、undefined

// @flow

const obj: {hello? : string}; // 屬性 hello 可以是 string, undefined

obj = {}; // 賦值
obj = {hello: undefined}; // 重新賦值
obj = {hello: "hello"}; // 重新賦值
obj = {hello: null}; // 報(bào)錯(cuò)
obj = {hello: 1}; // 報(bào)錯(cuò)
obj = {hello: true}; // 報(bào)錯(cuò)

// 屬性 param 可以是 number, undefined
function method(param?: number) { /* ... */ }

method(); // 正常
method(undefined); // 正常
method(1.12); // 正常
method(null); // 報(bào)錯(cuò)
method("hello"); // 報(bào)錯(cuò)

語(yǔ)義（Literal）類型一般用于聲明某個(gè)，某幾個(gè)特定的值（多個(gè)值用 | 分隔）

// @flow

let hello: "hello"; // 聲明一個(gè)只能賦值 "hello" 的變量

hello = "hello"; // 賦值
hello = "hi"; // 報(bào)錯(cuò)
hello = 12; // 報(bào)錯(cuò)
hello = undefined; // 報(bào)錯(cuò)
hello = null; // 報(bào)錯(cuò)

function method(param: 1 | "hi" | boolean): void { /* ... */ }

method(); // 報(bào)錯(cuò)，缺少參數(shù)
method(1); // ok
method(1.2); // 報(bào)錯(cuò)，類型不對(duì)
method("hi"); // ok
method("hello"); // 報(bào)錯(cuò)，類型不對(duì)
method(true); // ok
method(false); // ok

混合（Mixed）類型是指任意數(shù)據(jù)類型

// @flow

let hello: mixed; // 聲明一個(gè) mixed 類型的變量

hello = "hello"; // 賦值
hello = "hi"; // 重新賦值
hello = 12; // 重新賦值
hello = undefined; // 重新賦值
hello = null; // 重新賦值

1.4 復(fù)合類型

數(shù)組

// @flow

let arr1: Array = [true, false, true]; // 聲明一個(gè)元素是 boolean 的數(shù)組
arr1 = [true, 1]; // 報(bào)錯(cuò)，1 不是 boolean 值
arr1 = [""]; // 報(bào)錯(cuò)，"" 不是 boolean 值

let arr2: Array = ["A", "B", "C"]; // 聲明一個(gè)元素是 string 的數(shù)組

let arr3: Array = [1, true, "three"] // 聲明一個(gè)元素是任意類型的數(shù)組
arr1 = [true, 1]; // 重新賦值 
arr1 = [""]; // 重新賦值

map

// @flow

// 聲明一個(gè) map 類型，其有一個(gè)名為 foo，類型 boolean 的子元素
let obj1: { foo: boolean } = { foo: true };
obj1 = {}; // 報(bào)錯(cuò)，缺少 foo 這個(gè)屬性值
obj1 = {foo: 1}; // 報(bào)錯(cuò)，屬性值 foo 的類型必須是 boolean
obj1 = {foo: false, bar: "hello"}; // 重新賦值

// 聲明一個(gè) map 類型，其有名為 foo, bar, baz，類型 number, boolean, string 的子元素
let obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: "three",
};

更靜態(tài)類型可以查看 Type Annotations | Flow.

2. 使用工具

安裝

# 全局安裝
npm i -g flow-bin

# 本地安裝
npm i -D flow-bin

使用

flow init                       # 初始化項(xiàng)目

flow check path/to/dir          # 檢查這個(gè)目錄下所有的文件
flow check path/to/js/file      # 檢查指定文件

3. 配合 babel 一起使用

因?yàn)?flow 靜態(tài)類型只是對(duì) js 的擴(kuò)展，并不是 js 原生支持的，也不能直接運(yùn)行，所以，一般 flow 都是配合 babel 一起使用的，這樣就可以在程序運(yùn)行的時(shí)候進(jìn)行靜態(tài)類型檢查，達(dá)到我們想要的效果。

3.1 babel-preset-flow

安裝 babel-preset-flow，這樣 babel 在轉(zhuǎn)碼 js 文件時(shí)就能識(shí)別 flow 的語(yǔ)法。

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

源文件（flow）

// @flow

// 定義一個(gè) "兩個(gè)數(shù)字參數(shù)，返回值也是數(shù)字" 的函數(shù)
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 報(bào)錯(cuò)
plus(1); // 報(bào)錯(cuò)
plus("hello"); // 報(bào)錯(cuò)
plus("hello", " hi"); // 報(bào)錯(cuò)
plus({}, {}); // 報(bào)錯(cuò)

plus(1, 2); // 3

轉(zhuǎn)碼后的文件

// 定義一個(gè) "兩個(gè)數(shù)字參數(shù)，返回值也是數(shù)字" 的函數(shù)
function plus(a, b) {
  return a + b;
}

plus(); // 報(bào)錯(cuò)
plus(1); // 報(bào)錯(cuò)
plus("hello"); // 報(bào)錯(cuò)
plus("hello", " hi"); // 報(bào)錯(cuò)
plus({}, {}); // 報(bào)錯(cuò)

plus(1, 2); // 3

3.2 babel-plugin-flow-runtime

一般會(huì)在開(kāi)發(fā)環(huán)境下，使用 babel-plugin-flow-runtime 插件，這樣就可以在開(kāi)發(fā)的時(shí)候，實(shí)時(shí)檢查數(shù)據(jù)類型，就像原生的運(yùn)行 flow 靜態(tài)類型檢查一樣。（一般在產(chǎn)品環(huán)境不會(huì)使用這個(gè)功能，因?yàn)闀?huì)額外消耗 js 的性能）

npm i -D babel-plugin-flow-runtime flow-runtime

.babelrc

{
  "presets": ["flow"],
  "plugins": ["flow-runtime"]
}

源文件（flow）

// @flow

// 定義一個(gè) "兩個(gè)數(shù)字參數(shù)，返回值也是數(shù)字" 的函數(shù)
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 報(bào)錯(cuò)
plus(1); // 報(bào)錯(cuò)
plus("hello"); // 報(bào)錯(cuò)
plus("hello", " hi"); // 報(bào)錯(cuò)
plus({}, {}); // 報(bào)錯(cuò)

plus(1, 2); // 3

轉(zhuǎn)碼后的文件

import t from "flow-runtime";


// 定義一個(gè) "兩個(gè)數(shù)字參數(shù)，返回值也是數(shù)字" 的函數(shù)
function plus(a, b) {
  return a + b;
}

t.annotate(plus, t.function(t.param("a", t.number()), t.param("b", t.number()), t.return(t.number())));
plus(); // 報(bào)錯(cuò)
plus(1); // 報(bào)錯(cuò)
plus("hello"); // 報(bào)錯(cuò)
plus("hello", " hi"); // 報(bào)錯(cuò)
plus({}, {}); // 報(bào)錯(cuò)

plus(1, 2); // 3

這個(gè)時(shí)候，js 文件就會(huì)導(dǎo)入 flow-runtime 模塊，對(duì) plus 函數(shù)的參數(shù) a, b 和返回值進(jìn)行數(shù)據(jù)類型檢查，如果不符合數(shù)據(jù)定義，就會(huì)報(bào)錯(cuò)。

4. 后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

GPU云服務(wù)器云服務(wù)器靜態(tài)類型檢查 js檢查數(shù)據(jù)類型靜態(tài)代碼檢查 java靜態(tài)檢查

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96960.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

孫淑建

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

UCloud優(yōu)刻得CDN&視頻云聯(lián)合大促：CDN低至0.01元/GB 9.9元搶實(shí)時(shí)音視頻10萬(wàn)分鐘

閱讀 2000·2021-11-22 19:20
跨境電商企業(yè)如何做好郵件營(yíng)銷？重點(diǎn)關(guān)注這八點(diǎn)！

閱讀 2648·2021-11-22 13:54
打造Win10下完美Linux體驗(yàn)（WSL2+WindowsTerminal+oh-my-zsh），

閱讀 1980·2021-09-04 16:40
NameSilo：注冊(cè)局[Verisign]宣布2021年9月1日起.com域名漲價(jià),此前按現(xiàn)價(jià)續(xù)費(fèi)

閱讀 1830·2021-08-13 11:54
JavaScript常用工具方法封裝

閱讀 2681·2019-08-30 15:55
retina屏中1物理像素border的實(shí)現(xiàn)

閱讀 3472·2019-08-29 13:51
CSS3 animation介紹

閱讀 535·2019-08-29 11:09
Vue 源碼解析-- 文件入口及分布

閱讀 3014·2019-08-26 14:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端進(jìn)階（5） - js 擴(kuò)展：靜態(tài)類型檢查（facebook flow）

相關(guān)文章

Flow, 一個(gè)新的Javascript靜態(tài)類型檢查器

JS 靜態(tài)類型檢查工具 Flow

兩年React老兵的總結(jié) - 類型檢查篇

(譯 & 轉(zhuǎn)載) 2016 JavaScript 后起之秀

flow從零開(kāi)始----安裝和配置

發(fā)表評(píng)論

0條評(píng)論

孫淑建

男|高級(jí)講師

TA的文章

UCloud優(yōu)刻得CDN&視頻云聯(lián)合大促：CDN低至0.01元/GB 9.9元搶實(shí)時(shí)音視頻10萬(wàn)分鐘

跨境電商企業(yè)如何做好郵件營(yíng)銷？重點(diǎn)關(guān)注這八點(diǎn)！

打造Win10下完美Linux體驗(yàn)（WSL2+WindowsTerminal+oh-my-zsh），

NameSilo：注冊(cè)局[Verisign]宣布2021年9月1日起.com域名漲價(jià),此前按現(xiàn)價(jià)續(xù)費(fèi)

JavaScript常用工具方法封裝

retina屏中1物理像素border的實(shí)現(xiàn)

CSS3 animation介紹

Vue 源碼解析-- 文件入口及分布

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端進(jìn)階（5） - js 擴(kuò)展：靜態(tài)類型檢查（facebook flow）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！