JavaScript類(lèi)型檢查之Flow

zhonghanwen 發(fā)布于2019-08-23 18:41 / 845人閱讀

摘要：一是一種弱類(lèi)型動(dòng)態(tài)類(lèi)型檢查的語(yǔ)言。動(dòng)態(tài)類(lèi)型與靜態(tài)類(lèi)型的核心區(qū)別動(dòng)態(tài)類(lèi)型的類(lèi)型檢查是是在代碼運(yùn)行的時(shí)候進(jìn)行的，靜態(tài)類(lèi)型的類(lèi)型檢查則是在編譯時(shí)進(jìn)行。

一、js是一種弱類(lèi)型、動(dòng)態(tài)類(lèi)型檢查的語(yǔ)言。

弱類(lèi)型：在定義變量時(shí)，可以為變量定義復(fù)制任何數(shù)據(jù)，變量的數(shù)據(jù)類(lèi)型不是固定死的，這樣的類(lèi)型叫做弱類(lèi)型。

var a = 10;
a = "abc";
a = [];
a = function() {};

強(qiáng)類(lèi)型：在聲明變量時(shí)，一旦給變量賦值，那么變量的數(shù)據(jù)類(lèi)型就已經(jīng)確定，之后如果要給該變量賦值其他類(lèi)型的數(shù)據(jù)，需要進(jìn)行強(qiáng)制數(shù)據(jù)類(lèi)型轉(zhuǎn)換。

int a = 6;
a = "10";

動(dòng)態(tài)類(lèi)型與靜態(tài)類(lèi)型的核心區(qū)別

 動(dòng)態(tài)類(lèi)型的類(lèi)型檢查是是在代碼運(yùn)行的時(shí)候進(jìn)行的，靜態(tài)類(lèi)型的類(lèi)型檢查則是在編譯時(shí)進(jìn)行。
 運(yùn)行時(shí)類(lèi)型檢查--->`js`: 動(dòng)態(tài)類(lèi)型，類(lèi)型檢查的操作是在運(yùn)行時(shí)進(jìn)行的; 
 代碼中的錯(cuò)誤，只能在代碼運(yùn)行的時(shí)候被發(fā)現(xiàn)。影響代碼效率和穩(wěn)定性。

靜態(tài)類(lèi)型的優(yōu)勢(shì)

（1）提早發(fā)現(xiàn)代碼中的bug;

function greet(obj){
    obj.sayHello(); //報(bào)錯(cuò)沒(méi)有該方法
}

var o = {
    name: "張學(xué)友"
}

greet(o);

（2）提高代碼的可讀性

// 如果能指定a和b的類(lèi)型
// 指定為數(shù)字，這個(gè)函數(shù)的功能就非常明確了
// a: number
// b: number
// 返回值： number
function sum(a, b){
    return a + b;
}

（3）減少了復(fù)雜的錯(cuò)誤處理邏輯

/***
 * 這個(gè)函數(shù)接收一個(gè)數(shù)字?jǐn)?shù)組作為參數(shù)
 * 返回這個(gè)數(shù)組中所有數(shù)字的和
* */
 // function sum(arr){
 //     let result = 0;
 //     arr.forEach(v => {
 //         result += v;
 //     })
 //     return result;
 // }


function sum(arr){
    // 首先判斷用戶是否有傳遞參數(shù)進(jìn)來(lái)
    if(!arr){
        throw new Error("函數(shù)需要傳參");
    }

    if(!Array.isArray(arr)){
        throw new Error("函數(shù)需要一個(gè)數(shù)組作為參數(shù)");
    }

    if(!arr.every(v => typof v == "number")){
        throw new Error("函數(shù)需要的數(shù)組為數(shù)字?jǐn)?shù)組！")
    }

    let result = 0;
    arr.forEach(v => {
        result += v;
    })
    return result;
}

sum([1, 2, 3]);

sum(100)
sum(["a", "b"])
sum()

（4）適合使用IDE(集成開(kāi)發(fā)環(huán)境)，容易定位錯(cuò)誤的賦值類(lèi)型。

（5）便于代碼重構(gòu)

function test(num){
    console.log(num)
}

test({name: "郭富城"})

test({name: "郭富城"})


test({name: "郭富城"})

test({name: "郭富城"})

靜態(tài)類(lèi)型的問(wèn)題

增加代碼量（需要寫(xiě)更多類(lèi)型相關(guān)代碼，較復(fù)雜）

需要花時(shí)間掌握類(lèi)型

可能會(huì)降低開(kāi)發(fā)效率

如何在js中使用靜態(tài)類(lèi)型

1> Flow FaceBook 的開(kāi)源技術(shù)

2> TypeScript 微軟公司開(kāi)發(fā)的語(yǔ)言

二、 Flow的基本使用

Flow is a static type checker for JavaScript 即：js的靜態(tài)類(lèi)型檢查工具

1、flow起步

（1）初始化package.json

 npm init -y

補(bǔ)充：-f（代表force）、-y（代表yes）跳過(guò)提問(wèn)階段,直接生成一個(gè)新的package.json

（2）下載安裝flow

 npm install --save-dev flow-bin

補(bǔ)充：全局安裝 : 將一個(gè)模塊安裝到系統(tǒng)目錄中，各個(gè)項(xiàng)目都可以調(diào)用。一般來(lái)說(shuō)，全局安裝只適用于工具模塊，比如eslint和gulp
npm install XXX -g`
本地安裝 : 指的是將一個(gè)模塊下載到當(dāng)前項(xiàng)目的node_modules子目錄，然后只有在項(xiàng)目目錄之中，才能調(diào)用這個(gè)模塊。
npm install  XXX 與 npm install XXX --save (npm install XXX -S) 和 
npm install XXX --production,模塊名將被添加dependencies   生產(chǎn)環(huán)境要用的;;
npm install XXX --save-dev (npm install XXX -D),模塊名將被添加到devDependencies    開(kāi)發(fā)要用的

（3）手動(dòng)添加flow

使用npm run flow需要在“scripts”中手動(dòng)添加"flow": "flow"

 {
     "scripts": {
         "test": "echo "Error: no test specified" && exit 1",
         "flow": "flow"
      }
 }

（4）執(zhí)行以下命令，生成 .flowconfig 的空文件

 npm run flow init

 [ignore] //忽略檢測(cè)哪些文件  默認(rèn)檢查項(xiàng)目目錄下所有文件
 
 [include]  //檢測(cè)哪些文件  所謂的項(xiàng)目目錄其實(shí)是 .flowconfig 目錄，.flowconfig 所在的目錄就是一個(gè) Flow 項(xiàng)目
 
 [libs]  //第三方庫(kù)
 
 [lints]  
 
 [options]
 
 [strict]

2、flow使用基本語(yǔ)法

在flow中如果想要為一個(gè)數(shù)據(jù)添加類(lèi)型  var 變量: 數(shù)據(jù)類(lèi)型 = 數(shù)據(jù);
想要flow檢查那個(gè)文件，就需要給文件添加@flow標(biāo)記，否則flow不會(huì)對(duì)文件進(jìn)行類(lèi)型檢測(cè)

1、通過(guò)注釋的方式進(jìn)行添加

(不會(huì)改寫(xiě)js代碼，代碼在添加完類(lèi)型之后仍然可以正常運(yùn)行)

   //@flow
   var a /*: number*/ = 10; 
   a = "abc";
   console.log(a);

執(zhí)行命令：

   npm run flow

類(lèi)型檢測(cè)結(jié)果：

通過(guò)注釋方式添加的js 執(zhí)行: node + 要進(jìn)行檢查的js文件, js代碼正常運(yùn)行。

2、使用babel進(jìn)行轉(zhuǎn)碼（推薦）

通過(guò)直接給數(shù)據(jù)添加類(lèi)型，改寫(xiě)了js代碼，js代碼運(yùn)行會(huì)報(bào)語(yǔ)法錯(cuò)誤，如果要正常運(yùn)行，需要使用babel進(jìn)行轉(zhuǎn)碼（推薦）

1）安裝babel:

   npm install babel-cli babel-preset-flow -D

2）在項(xiàng)目的根目錄中創(chuàng)建一個(gè).babelrc文件:

   {
     "presets": ["flow"]
   }

3）在package.json的“scripts”中添加 "build": "babel src/ -d ./dist"

注釋?zhuān)喊研枰狟abel進(jìn)行編譯的文件放到src文件夾下，編譯后的文件放到dist文件夾下，

-d表示目錄。

   {
       "scripts": {
            "build": "babel src/ -d ./dist"
       }
   }

最后運(yùn)行：

   //@flow
   var a: number = 5；
   function sum(x:number,i:number) {
       return x + i;
   }
   sum(1,2);
   //上面代碼要正常運(yùn)行的話，需要通過(guò)babel進(jìn)行轉(zhuǎn)碼。
//------------------------------分割線----------------------------------------
// 執(zhí)行`npm run build`后，代碼被編譯成-如下
   var a = 5;
   a = "abc";
   function sum(x, i) {
       return x + i;
   }
   sum(1, 2);

3、flow中的數(shù)據(jù)類(lèi)型

//@flow
//number類(lèi)型
//number類(lèi)型可以賦值的內(nèi)容為：數(shù)字，NaN, Infinity
let a: number = 100;
let b: number = NaN;
let c: number  = Infinity;

//string類(lèi)型
//number類(lèi)型可以賦值的內(nèi)容為：字符串
let str1: string = "12334"

//boolean 布爾類(lèi)型
//void  javascript中的undefined
//null js中的null

//Array 類(lèi)型
//在聲明數(shù)據(jù)為數(shù)組類(lèi)型的時(shí)候，我們需要為數(shù)組制定元素的類(lèi)型
let arr: Array = [1,2,3];

//any  任意類(lèi)型
let name: any = 123;
name = "123";
let arr2: Array = [1,2,"3"]

//Object 對(duì)象類(lèi)型
function obj(o：{sayH: () => void}, name: string) {
    o.sayH();
}
let o = {
    name: "小明",
    sayH() {
        console.log("hello")
    }
}
obj(o)

function ajx(option: {url: string, type: string, success: (data: Object)=> void}) {
    
}
ajx()

//--------------------------------------------分割線------------------------------------
//Function 函數(shù)類(lèi)型
//@flow
function test(a: number, b:number): number {
    return a + b;
}

// let d: string = test(1, 2);

//可以將變量聲明為函數(shù)類(lèi)型
//也就意味著我們可以指定為變量賦值的函數(shù)的類(lèi)型
let func:(a: number, b:number) => number = test;
function ajc(callback:(data: Object) => void) {

}
ajc(function(obj: Object) {

})
//-------------------------------------------分割線-------------------------------------
//Maybe類(lèi)型
//@flow
//Maybe類(lèi)型相當(dāng)于給數(shù)據(jù)添加了兩個(gè)可能的類(lèi)型null和void
function test(a: ?number) {
    a = a || 0;
    console.log(a);
}
test(10);
test();

//或操作
let a: number | string = 234;
a = "23";  //ok
a = true; //error

//類(lèi)型推斷
function test(a:number, b: number) {
    return a + b;
}
let c: string = test(1,2); //error,推斷函數(shù)返回number類(lèi)型，與string不匹配；

4、簡(jiǎn)化錯(cuò)誤處理代碼

不使用flow:

/**
 * 功能：傳遞一個(gè)數(shù)字?jǐn)?shù)組，計(jì)算數(shù)組中所有數(shù)字的和并返回結(jié)果；
 */
function sum(arr) {
    //是否有參數(shù)傳入
    if(!arr) {
        throw new Error("此函數(shù)需要傳遞一個(gè)數(shù)組作為參數(shù)")
    }
    //傳入?yún)?shù)是否是數(shù)組
    if(!Array.isArray(arr)) {
        throw new Error("此函數(shù)需要傳遞一個(gè)數(shù)組參數(shù)")
    }
    //傳入?yún)?shù)是否是數(shù)字?jǐn)?shù)組
    if(!arr.every(v => typeof v === "number")) {
        throw new Error("此函數(shù)需要傳遞一個(gè)數(shù)組作為參數(shù),數(shù)組中的元素需要全部為數(shù)字")
    }

    let result = 0;
    arr.forEach(v => {
        result += v;
    })
    return result;
}
sum([2,3]);

使用flow：

//@flow
function sum(arr: Array) {
    let result = 0;
    arr.forEach(v => {
        result += v;
    })
    return result;
}
sum([2,"3"]);

結(jié)果：

三、小結(jié)

Flow:

Flow is a static type checker for JavaScript 即：js的靜態(tài)類(lèi)型檢查工具；

給js提供了靜態(tài)類(lèi)型檢查的能力，其實(shí)就是為js添加了一個(gè)編譯過(guò)程；

云服務(wù)器 GPU云服務(wù)器靜態(tài)類(lèi)型檢查 js檢查數(shù)據(jù)類(lèi)型 java怎么檢查類(lèi)型檢查 ssl證書(shū) 類(lèi)型

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

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

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

登陸后可評(píng)論

0條評(píng)論

zhonghanwen

男|高級(jí)講師

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

TA的文章

#黑五#DediPath：美國(guó)10個(gè)機(jī)房VPS全部3.5折，低至$27.3/年，1C/1G/10G

閱讀 1222·2021-11-24 10:27
＜LeetCode天梯＞Day027 合并兩個(gè)有序鏈表（遞歸法+改進(jìn)遞歸） | 初級(jí)算法 | Pyt

閱讀 3520·2021-11-18 10:02
C語(yǔ)言初階學(xué)習(xí)——掃雷小游戲（遞歸）

閱讀 2568·2021-11-16 11:45
商標(biāo)到期

閱讀 3314·2021-11-15 18:10
云主機(jī)是干什么的-什么是云主機(jī)？是做什么用的，能簡(jiǎn)單的說(shuō)明白嗎？

閱讀 1001·2021-09-22 15:23
雪碧圖的生成

閱讀 1690·2019-08-30 15:53
vue2.0子組件修改父組件數(shù)據(jù)

閱讀 3185·2019-08-30 13:20
你們對(duì)于vw一無(wú)所知

閱讀 1833·2019-08-30 12:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

JavaScript類(lèi)型檢查之Flow

1、flow起步

（1）初始化package.json

（2）下載安裝flow

（3）手動(dòng)添加flow

（4）執(zhí)行以下命令，生成 .flowconfig 的空文件

2、flow使用基本語(yǔ)法

1、通過(guò)注釋的方式進(jìn)行添加

2、使用babel進(jìn)行轉(zhuǎn)碼（推薦）

3、flow中的數(shù)據(jù)類(lèi)型

4、簡(jiǎn)化錯(cuò)誤處理代碼

相關(guān)文章

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

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

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

**vue2.0項(xiàng)目配置flow類(lèi)型檢查**

JavaScript 需要檢查變量類(lèi)型嗎

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

0條評(píng)論

zhonghanwen

男|高級(jí)講師

TA的文章

#黑五#DediPath：美國(guó)10個(gè)機(jī)房VPS全部3.5折，低至$27.3/年，1C/1G/10G

＜LeetCode天梯＞Day027 合并兩個(gè)有序鏈表（遞歸法+改進(jìn)遞歸） | 初級(jí)算法 | Pyt

C語(yǔ)言初階學(xué)習(xí)——掃雷小游戲（遞歸）

商標(biāo)到期

云主機(jī)是干什么的-什么是云主機(jī)？是做什么用的，能簡(jiǎn)單的說(shuō)明白嗎？

雪碧圖的生成

vue2.0子組件修改父組件數(shù)據(jù)

你們對(duì)于vw一無(wú)所知

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

JavaScript類(lèi)型檢查之Flow

1、flow起步

（1）初始化package.json

（2）下載安裝flow

（3）手動(dòng)添加flow

（4）執(zhí)行以下命令，生成 .flowconfig 的空文件

2、flow使用基本語(yǔ)法

1、通過(guò)注釋的方式進(jìn)行添加

2、使用babel進(jìn)行轉(zhuǎn)碼（推薦）

3、flow中的數(shù)據(jù)類(lèi)型

4、簡(jiǎn)化錯(cuò)誤處理代碼

相關(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)！

（4）執(zhí)行以下命令，生成 .flowconfig 的空文件

2、flow使用基本語(yǔ)法

1、通過(guò)注釋的方式進(jìn)行添加

2、使用babel進(jìn)行轉(zhuǎn)碼（推薦）

3、flow中的數(shù)據(jù)類(lèi)型

4、簡(jiǎn)化錯(cuò)誤處理代碼