《一》大話 Typescript 基本類型

本文章爲 Typescript 系列文章. 旨在利用碎片時間淺顯易懂的快速入門 Typescript. 或從新溫故 Typescript 查漏補缺

做爲一個使用 Typescript 好久好久好久的人來講, 真真切切感覺到了 Typescript 的魔法, 大大提升了代碼的可維護性. 方便代碼重構(一個月重構一次, 半年重構6次,不是在重構的路上就是在重構……)

文章列表:

• [一] Typescript 基本類型
• [二] Typescript 枚舉
• [三] Typescript 接口
• ……

基本類型

1. javascript 類型 :

Boolean Number String Array Funciton Object Symbol undefined null

2. 補充類型

void any never 元祖 枚舉 高級類型

基本語法

(變量/函數): type [type 爲上面的數據類型 ]

最簡單聲明的幾種類型以下:

let bool: boolean = true
let num: number = 111
let str: string = 'aaa'
let s1: stmbol = Symbol()
複製代碼

數組類型

有2種方式聲明, 一種在元素類型後接上 [] , 一種使用數組泛型, Array<元素類型>.

let arr1: number[] = [1,2,3]
let arr2: Array<number>= [1,2,3] 
複製代碼

若是咱們但願數組裏既有 number , 又有 string , 只須要在泛型中加上 <number | string> 以下:

let arr2: Array<number | string> = [1,2,3,'4']  
複製代碼

或者使用元祖的方式

元祖

做用: 限定了數組的類型和個數. 好比下面的, 第一個必須爲 number ,第二個必須爲 string , 只能有2個值, 不能超過2個

let tuple: [number , string] = [1 , '2']  // 能夠給該元祖添加新元素, 但不能 「越界」 訪問
複製代碼

不能越界訪問, 直接看例子

let tuple: [number , string] = [1 , '2']
tuple.push('3'); //正常push
tuple[2]  //報錯, 由於越界訪問了
複製代碼

undefined null

若是一個值聲明瞭 undefined , 則不能賦值給其餘類型的值. 看例子

let x:undefined = undefined; //正常
let x:undefined = ‘1’; //報錯
複製代碼

同理, undefined 和 null 也不能賦值給其餘類型. 以下:

let h: number = undefined; //報錯, 若是 strictNullChecks 爲 true 
複製代碼

可是在項目中, 偶爾須要使用到 undefined 和 指定類型的場景. 好比接口未我回來時, 可能須要使用 undefined 做爲默認值, 等接口回來後再賦值. 如何支持這張場景?

1. 在 tsconfig.json 中將 strictNullChecks 設置爲 false 便可. 不推薦此方法

   

2. 使用聯合類型 推薦

let num: number | undefined |  null = 111 
複製代碼

void

一個沒有任何返回的函數, 就用 void , 沒啥好說的...

function warnUser(): void {
}
複製代碼

any 類型

剛接觸typescript的時候, 很容易就滿處 any 大法, 一寫 any , 啥報錯都沒了. 可是若是都使用 any ,那就不必使用 ts 了 😄

never 類型

通常不多使用, 函數拋出錯誤 或 死循環

function error(message): never {
    throw new Error(message);
}
function infiniteLoop(): never {
    while (true) {
    }
}
複製代碼

本系列文章以簡短爲主, 在官方api的基礎上, 加上一些平常使用的感想. 能夠快速瀏覽, 利用碎片化鞏固知識. 若是感興趣的話~ 歡迎關注, 後續持續推出文章.

最後

• 歡迎加我微信(A18814127),拉你進技術羣，長期交流學習...
• 歡迎關注「前端加加」,認真學前端，作個有專業的技術人...