摘要:一是一種弱類型動態(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)類型檢查工具
npm init -y
補充:-f(代表force)、-y(代表yes)跳過提問階段,直接生成一個新的package.json
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ā)要用的
使用npm run flow需要在“scripts”中手動添加"flow": "flow"
{
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"flow": "flow"
}
}
npm run flow init
[ignore] //忽略檢測哪些文件 默認檢查項目目錄下所有文件
[include] //檢測哪些文件 所謂的項目目錄其實是 .flowconfig 目錄,.flowconfig 所在的目錄就是一個 Flow 項目
[libs] //第三方庫
[lints]
[options]
[strict]
在flow中如果想要為一個數(shù)據(jù)添加類型 var 變量: 數(shù)據(jù)類型 = 數(shù)據(jù);
想要flow檢查那個文件,就需要給文件添加@flow標記,否則flow不會對文件進行類型檢測
(不會改寫js代碼,代碼在添加完類型之后仍然可以正常運行)
//@flow
var a /*: number*/ = 10;
a = "abc";
console.log(a);
執(zhí)行命令:
npm run flow
類型檢測結果:
通過注釋方式添加的js 執(zhí)行: node + 要進行檢查的js文件, js代碼正常運行。
通過直接給數(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);
//@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不匹配;
不使用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
摘要:介紹是個的靜態(tài)類型檢查工具,由出品的開源碼項目,問世只有一年多,是個相當年輕的項目?,F(xiàn)在,提供了另一個新的選項,它是一種強靜態(tài)類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質(zhì)上也只是個檢查工具,它并不會自動修正代碼中的錯誤,也不會強制...
摘要:原文鏈接翻譯于今天我們興奮的發(fā)布了的嘗鮮版,一個新的靜態(tài)類型檢查器。為添加了靜態(tài)類型檢查,以提高開發(fā)效率和代碼質(zhì)量。這最終形成一個高度并行增量式的檢查架構,類似。知道縮小類型范圍時做動態(tài)檢查的影響。 原文鏈接:https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-java...
摘要:本文主要介紹了解決作為弱類型語言沒有類型檢查痛點的靜態(tài)類型檢查工具,并且介紹了在中使用的方法,最后介紹了一些常用的語法。 本文主要介紹了解決JS作為弱類型語言沒有類型檢查痛點的靜態(tài)類型檢查工具 Flow ,并且介紹了在WebStorm中使用Flow的方法,最后介紹了一些常用的Flow語法。 1. 簡介 JS作為一種腳本語言是沒有類型檢測的,這個特點有時候用著很方便,但在一個較大的項目中...
摘要:在的項目中加入類型檢查。當前項目是用寫的,當項目越來越大,由于弱類型的特性,相比這種強類型的語言而言,后期維護會越來越困難。為了解決這個問題,決定使用加入類型檢查。一了解是公布的靜態(tài)類型檢查器。中配置配置,使其支持語法。 在vue2.0的項目中加入flow類型檢查。當前項目是用js寫的,當項目越來越大,由于js弱類型的特性,相比ts(typescript)這種強類型的語言而言,后期維護...
摘要:一返回值調(diào)用外部方法獲取的值需要對類型做判斷,因為我們對方法返回的值是有期望值類型,但是卻不能保證這個接口返回的值一直是同一個類型。 19年目標:消滅英語!我新開了一個公眾號記錄一個程序員學英語的歷程 有提升英語訴求的小伙伴可以關注公眾號:csenglish 程序員學英語,每天花10分鐘交作業(yè),跟我一起學英語吧 javascript作為一門動態(tài)類型語言,具有很高的動態(tài)靈活性,當定義函數(shù)...
閱讀 1080·2021-11-24 10:27
閱讀 3352·2021-11-18 10:02
閱讀 2411·2021-11-16 11:45
閱讀 3173·2021-11-15 18:10
閱讀 842·2021-09-22 15:23
閱讀 1545·2019-08-30 15:53
閱讀 3031·2019-08-30 13:20
閱讀 1678·2019-08-30 12:53