什么是 TypeScript?
TypeScript 是一個開源的編程語言,通過在 JavaScript(世界上最常用的語言之一) 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。
類型提供了一種描述對象形狀的方法。可以幫助提供更好的文檔,還可以讓 TypeScript 驗證你的代碼可以正常工作。
在 TypeScript 中,不是每個地方都需要標注類型,因為類型推斷允許您無需編寫額外的代碼即可獲得大量功能。
安裝 TypeScript
你可以使用 npm 安裝 TypeScript,之后執(zhí)行 tsc 來運行 TypeScript 編譯器
npm install -g typescript
TypeScript自動編譯
運行 tsc --init ,創(chuàng)建tsconfig.json文件
修改 tsconfig.json 文件,設(shè)置js文件夾: "outDir":"/js"
設(shè)置VsCode監(jiān)視任務(wù),之后修改項中的ts,自動生成js
基礎(chǔ)類型
TS里的類型注解是一種輕量級的為函數(shù)或變量添加約束的方式。
-
boolean(布爾)
let flag: boolean = false; -
number(數(shù)字)
let _num: number = 1; -
string(字符串)
let str: string = '123' -
array(數(shù)組)
/*兩種方式可以定義數(shù)組*/ let arr: number[] = [1, 2, 3]; /*第一種:在元素類型后面拼接[]*/ let arr: Array[number] = [1, 2, 3]; /*第二種:數(shù)組泛型,Array[元素類型]*/ -
Tuple(元組)
元組類型允許表示一個已知元素數(shù)量和類型的數(shù)組,各元素的類型不必相同。 比如,你可以定義一對值分別為 string和number類型的元組let x: [string, number]; x= ['haha', 1]; // ok x= [1, 'haha']; //error /*當對數(shù)組中的某個索引值進行方法處理時,這是要注意對應索引的值的類型,如下:*/ console.log(x[0].substr()) //ok, string存在substr方法 console.log(x[1].sunstr()) //error, number不存在substr方法 /*給未定義索引增加值時:*/ x[3]= '1212'; // ok x[4]= 1212; //ok X[5] = ture; // Error, 布爾不是(string | number)類型 -
enum(枚舉)
枚舉是一個可被命名的整型常數(shù)的集合,枚舉類型為集合成員賦予有意義的名稱增強可讀性。enum Color {red,green,blue}; let c: Color = Color.blue; console.log(c); //2 枚舉默認下標是0,也可以手動修改,下標依次增加1 enum Color {red = 2,green = 3,blue = 6, yellow}; let c: Color = Color.blue; console.log(c); //6 console.log(yellow); //7 -
any(任意)
任意值是TypeScript針對編程時類型不明確的變量使用的一種數(shù)據(jù)類型,常用于以下三種類型:1、值可能來自于動態(tài)的內(nèi)容,比如來自用戶輸入或第三方代碼庫。 這種情況下,我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 let _any: any = '12' 2、允許你在編譯時可選擇地包含或移除類型檢查 let x: any = 4; x.toFixed(); //正確,并不檢查是否存在 3、定義儲存各種類型數(shù)據(jù)的數(shù)組時 let arrarList: any[] = [1,'qwe',true]; -
void
使用void表示沒有任何類型,例如一個函數(shù)沒有返回值(即沒有return值出來),意味著返回void,void類型只能為undefined和nullfunction arr():void{ console.log('ahhahahah') } let unusable: void = null /*一個變量聲明void類型沒有什么意義*/ -
Null 和 Undefined
TypeScript里,undefined和null兩者各自有自己的類型分別叫做undefined和null。 和 void相似,它們的本身的類型用處不是很大let u: undefined = undefined; let n: null = null; 注意:null和undefind是所有類型的子類,也就是說在其它類型下,賦值null或者undefind都是可以的; 然而,當你指定了--strictNullChecks標記,null跟undefind就只能注解自己對應的類型了。 strictNumChecks標記在tsconfig.json下配置"strictNullChecks": true即可 (官方提示強烈推薦使用) -
Never
never是其他類型(包括null和undefined)的子類型,代表從不會出現(xiàn)的值,這意味著聲明為never類型的變量只能被never類型所賦值,在函數(shù)中通常表示為拋出異?;驘o法執(zhí)行到終止點。let x: never; let y: number; //報錯 x = 123; //正確 y = x;