摘要：一是一種弱類型動態(tài)類型檢查的語言。動態(tài)類型與靜態(tài)類型的核心區(qū)別動態(tài)類型的類型檢查是是在代碼運行的時候進行的，靜態(tài)類型的類型檢查則是在編譯時進行。

弱類型：在定義變量時，可以為變量定義復制任何數據，變量的數據類型不是固定死的，這樣的類型叫做弱類型。

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

強類型：在聲明變量時，一旦給變量賦值，那么變量的數據類型就已經確定，之后如果要給該變量賦值其他類型的數據，需要進行強制數據類型轉換。

int a = 6;
a = "10";

動態(tài)類型與靜態(tài)類型的核心區(qū)別

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

靜態(tài)類型的優(yōu)勢

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

function greet(obj){
    obj.sayHello(); //報錯沒有該方法
}

var o = {
    name: "張學友"
}

greet(o);

（2）提高代碼的可讀性

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

（3）減少了復雜的錯誤處理邏輯

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


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

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

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

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

sum([1, 2, 3]);

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

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

（5）便于代碼重構

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

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

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


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

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

靜態(tài)類型的問題

增加代碼量（需要寫更多類型相關代碼，較復雜）

需要花時間掌握類型

可能會降低開發(fā)效率

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

1> Flow FaceBook 的開源技術

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

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

1、flow起步

（1）初始化package.json

 npm init -y 

補充：-f（代表force）、-y（代表yes）跳過提問階段,直接生成一個新的package.json

（2）下載安裝flow

 npm install --save-dev flow-bin

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

（3）手動添加flow

使用npm run flow需要在“scripts”中手動添加"flow": "flow"

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

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

 npm run flow init

 [ignore] //忽略檢測哪些文件  默認檢查項目目錄下所有文件
 
 [include]  //檢測哪些文件  所謂的項目目錄其實是 .flowconfig 目錄，.flowconfig 所在的目錄就是一個 Flow 項目
 
 [libs]  //第三方庫
 
 [lints]  
 
 [options]
 
 [strict]

2、flow使用基本語法

在flow中如果想要為一個數據添加類型  var 變量: 數據類型 = 數據;
想要flow檢查那個文件，就需要給文件添加@flow標記，否則flow不會對文件進行類型檢測

1、通過注釋的方式進行添加

(不會改寫js代碼，代碼在添加完類型之后仍然可以正常運行)

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

執(zhí)行命令：

   npm run flow

類型檢測結果：

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

2、使用babel進行轉碼（推薦）

通過直接給數據添加類型，改寫了js代碼，js代碼運行會報語法錯誤，如果要正常運行，需要使用babel進行轉碼（推薦）

1）安裝babel:

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

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

   {
     "presets": ["flow"]
   }

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

注釋：把需要Babel進行編譯的文件放到src文件夾下，編譯后的文件放到dist文件夾下，
-d表示目錄。

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

最后運行：

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

3、flow中的數據類型

//@flow
//number類型
//number類型可以賦值的內容為：數字，NaN, Infinity
let a: number = 100;
let b: number = NaN;
let c: number  = Infinity;

//string類型
//number類型可以賦值的內容為：字符串
let str1: string = "12334"

//boolean 布爾類型
//void  javascript中的undefined
//null js中的null

//Array 類型
//在聲明數據為數組類型的時候，我們需要為數組制定元素的類型
let arr: Array = [1,2,3];

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

//Object 對象類型
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 函數類型
//@flow
function test(a: number, b:number): number {
    return a + b;
}

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

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

}
ajc(function(obj: Object) {

})
//-------------------------------------------分割線-------------------------------------
//Maybe類型
//@flow
//Maybe類型相當于給數據添加了兩個可能的類型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

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

4、簡化錯誤處理代碼

不使用flow:

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

    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"]);

結果：

Flow:

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

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