国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript類型檢查之Flow

zhonghanwen / 771人閱讀

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

一、js是一種弱類型、動態(tài)類型檢查的語言。

弱類型:在定義變量時,可以為變量定義復制任何數(shù)據(jù),變量的數(shù)據(jù)類型不是固定死的,這樣的類型叫做弱類型。

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

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

int a = 6;
a = "10";

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

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

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

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

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

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

greet(o);

(2)提高代碼的可讀性

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

(3)減少了復雜的錯誤處理邏輯

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


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

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

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

    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的基本使用

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
補充:

全局安裝 : 將一個模塊安裝到系統(tǒng)目錄中,各個項目都可以調(diào)用。一般來說,全局安裝只適用于工具模塊,比如eslint和gulp

npm install XXX -g`

本地安裝 : 指的是將一個模塊下載到當前項目的node_modules子目錄,然后只有在項目目錄之中,才能調(diào)用這個模塊。

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 開發(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中如果想要為一個數(shù)據(jù)添加類型  var 變量: 數(shù)據(jù)類型 = 數(shù)據(jù);
想要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進行轉(zhuǎn)碼(推薦)

通過直接給數(shù)據(jù)添加類型,改寫了js代碼,js代碼運行會報語法錯誤,如果要正常運行,需要使用babel進行轉(zhuǎn)碼(推薦)

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進行轉(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ù)類型
//@flow
//number類型
//number類型可以賦值的內(nèi)容為:數(shù)字,NaN, Infinity
let a: number = 100;
let b: number = NaN;
let c: number  = Infinity;

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

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

//Array 類型
//在聲明數(shù)據(jù)為數(shù)組類型的時候,我們需要為數(shù)組制定元素的類型
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 函數(shù)類型
//@flow
function test(a: number, b:number): number {
    return a + b;
}

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

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

}
ajc(function(obj: Object) {

})
//-------------------------------------------分割線-------------------------------------
//Maybe類型
//@flow
//Maybe類型相當于給數(shù)據(jù)添加了兩個可能的類型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,推斷函數(shù)返回number類型,與string不匹配;
4、簡化錯誤處理代碼

不使用flow:

/**
 * 功能:傳遞一個數(shù)字數(shù)組,計算數(shù)組中所有數(shù)字的和并返回結果;
 */
function sum(arr) {
    //是否有參數(shù)傳入
    if(!arr) {
        throw new Error("此函數(shù)需要傳遞一個數(shù)組作為參數(shù)")
    }
    //傳入?yún)?shù)是否是數(shù)組
    if(!Array.isArray(arr)) {
        throw new Error("此函數(shù)需要傳遞一個數(shù)組參數(shù)")
    }
    //傳入?yún)?shù)是否是數(shù)字數(shù)組
    if(!arr.every(v => typeof v === "number")) {
        throw new Error("此函數(shù)需要傳遞一個數(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"]);

結果:

三、 小結

Flow:

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

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

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

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/105669.html

相關文章

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

    摘要:介紹是個的靜態(tài)類型檢查工具,由出品的開源碼項目,問世只有一年多,是個相當年輕的項目?,F(xiàn)在,提供了另一個新的選項,它是一種強靜態(tài)類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質(zhì)上也只是個檢查工具,它并不會自動修正代碼中的錯誤,也不會強制...

    seanHai 評論0 收藏0
  • Flow, 一個新的Javascript靜態(tài)類型檢查

    摘要:原文鏈接翻譯于今天我們興奮的發(fā)布了的嘗鮮版,一個新的靜態(tài)類型檢查器。為添加了靜態(tài)類型檢查,以提高開發(fā)效率和代碼質(zhì)量。這最終形成一個高度并行增量式的檢查架構,類似。知道縮小類型范圍時做動態(tài)檢查的影響。 原文鏈接:https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-java...

    liangzai_cool 評論0 收藏0
  • JS 靜態(tài)類型檢查工具 Flow

    摘要:本文主要介紹了解決作為弱類型語言沒有類型檢查痛點的靜態(tài)類型檢查工具,并且介紹了在中使用的方法,最后介紹了一些常用的語法。 本文主要介紹了解決JS作為弱類型語言沒有類型檢查痛點的靜態(tài)類型檢查工具 Flow ,并且介紹了在WebStorm中使用Flow的方法,最后介紹了一些常用的Flow語法。 1. 簡介 JS作為一種腳本語言是沒有類型檢測的,這個特點有時候用著很方便,但在一個較大的項目中...

    CloudDeveloper 評論0 收藏0
  • vue2.0項目配置flow類型檢查

    摘要:在的項目中加入類型檢查。當前項目是用寫的,當項目越來越大,由于弱類型的特性,相比這種強類型的語言而言,后期維護會越來越困難。為了解決這個問題,決定使用加入類型檢查。一了解是公布的靜態(tài)類型檢查器。中配置配置,使其支持語法。 在vue2.0的項目中加入flow類型檢查。當前項目是用js寫的,當項目越來越大,由于js弱類型的特性,相比ts(typescript)這種強類型的語言而言,后期維護...

    Rocko 評論0 收藏0
  • JavaScript 需要檢查變量類型

    摘要:一返回值調(diào)用外部方法獲取的值需要對類型做判斷,因為我們對方法返回的值是有期望值類型,但是卻不能保證這個接口返回的值一直是同一個類型。 19年目標:消滅英語!我新開了一個公眾號記錄一個程序員學英語的歷程 有提升英語訴求的小伙伴可以關注公眾號:csenglish 程序員學英語,每天花10分鐘交作業(yè),跟我一起學英語吧 javascript作為一門動態(tài)類型語言,具有很高的動態(tài)靈活性,當定義函數(shù)...

    Songlcy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<