一、TypeScript 類型注解

1、什么是TpyeScript類型注解

? ? ? ? - 是否還記得TypeScript的兩個重要特性？

? ? ? ? ? ? ? ? ? - 類型系統、適用于任何規模

? ? ? ? - 可以說，TS的類型系統是TS最重要的功能；那么什么是類型注解呢？其實就是在聲明變量時，將變量的類型一同聲明出來?

? ? ? ? ? ? ? ? let 變量.類型=“值”

? ? ? ? ? ? ? ? 簡寫：let 變量 = 值

? ? ? ? ? ? ? ? 當省略.類型時，系統會自動根據當前值確定當前變量的類型

2、類型注解的優勢

? ? ? ? - 當使用類型注解之后，變量值的類型將不能發生改變，否則就會報錯，這樣就可以保證代碼的嚴謹性和規范性

????????

? ? ? ? ?- 當使用類型注解之后，在變量后面敲一個.運算符，可以發現當前數據類型下的方法和屬性都會幫助你提示出來

????????

3、vscode錯誤提示插件

如果想讓vscode的錯誤提示更明顯一些，可以下載插件幫助完成

????????

可以發現，開啟之后，錯誤更加直觀

????????

TypeScript中的類型注解有那些

1、TS中支持的類型有哪些？

? ? ? ? 可以將TS中常見的基礎類型分兩類：

? ? ? ? ? ? ? ? - JavaScript已有類型

? ? ? ? ? ? ? ? ? ? ? ? 簡單類型：number、string、boolean、null、undefined

? ? ? ? ? ? ? ? ? ? ? ? 復雜類型：數組、對象、函數（在ts中，將object類型做了更細致的劃分）、

? ? ? ? ? ? ? ? - TypeScript新增類型

? ? ? ? ? ? ? ? ? ? ? ? 聯合類型、自定義類型（類型別名）、接口、元祖、字面量類型、枚舉、void…

一、TypeScript類型約束 - 簡單類型

? ? ? ? 1、TS已有類型中的簡單類型

? ? ? ? ? ? ? ? 對于簡單類型其實很容易理解和掌握，跟number一樣，可以嘗試一下其他簡單類型

????????????????

2、解決一個問題

? ? ? ? 在復雜類型之前，來看一個現象，將main.ts復制一份出來，會發現ts文件中咱們之前的變量都會報錯

? ? ? ?

? ? ? ? 原因就是ts環境下，程序認為在同一個目錄下的文件都是同一塊作用域，所以變量出錯

? ? ? ? 解決辦法：將代碼套在花括號（{}塊級作用域）中，將變量的作用域隔絕開

????????

這個錯誤，聲明了變量未使用， 使用一下就不會報錯了。

二、TypeScript類型約束 - 數組

1、TS已有類型中的負載類型 - 數組

? ? ? ? 數組類型的定義還是有點特殊的，因為數組的定義不是定義變量本身是數組類型，而是定義數組內部可以存放什么類型的數據

? ? ? ? ? ? ? ? - 數組定義方式 1：

? ? ? ? ? ? ? ? ? ? ? ? let arr.number[]=[]，

? ? ? ? ? ? ? ? ? ? ? ? number[]是約束數組中存儲的數據必須是數字類型

? ? ? ? ? ? ? ? - 數組 定義方式 2：

? ? ? ? ? ? ? ? ? ? ? ? let arr.Array<string>=[] ；利用了泛型的知識點，后面會詳細講解泛型

三、TypeScript類型約束 - 聯合類型

? ? ? ? 學習完數組的定義方法之后，肯定有一個問題，就是如果數組中存在的數據類型不止一種怎么辦這就是需要用到聯合類型了：

? ? ? ?聯合類型其實就是通過 | 運算符，將多個類型隔開，已達到都能兼容的目的

? ? ? ? ? ? ? ? let arr.(number | string)[]=[]

? ? ? ? ? ? ? ? 當然，如果還有更多類型，就可以通過|去連接即可

????????聯合類型除了可以在定義數組時使用，在定義普通變量時也可以使用

????????????????let params:number|null=null

? ? ? ? ?比如咱們之前在做練習時，經常使用變量接收一個計時器，其實計時器返回的結果是一個數字，是計時器的id。但是咱們在定義變量的時候經常定義成null，所以這時候就可以通過聯合類型解決這個問題：

????????

總結：其實聯合類型并不是一個新類型，只是多個類型的結合而已！

四、TypeScript類型約束 - 類型別名

想要知道什么是類型別名，大家來看一下下面這種情況，比如我有一個數組，里邊可以存放number/string/boolean/null/undefined:

????????let arr: ( number | string | boolean | null | undefined )[] = [ ];

好的，比如現在我有多個這樣的數組，你的代碼結構就會變成：

????????let arr: ( number | string | boolean | null | undefined )[] = [ ];

????????let arr: ( number | string | boolean | null | undefined )[] = [ ];

????????let arr: ( number | string | boolean | null | undefined )[] = [ ];

雖然說這么寫也沒什么問題，但是代碼質量看起來確實很low，那么如果我能把類型當做一個變量存儲起來，是不是可以極大的簡寫代碼結構呢？

?類型別名 type ArrType = ( number | string | boolean | null | undefined )[]；

????????let arr: ArrType = [ ];

????????let arr: ArrType = [ ];

????????let arr: ArrType = [ ];

類型別名就是使用關鍵詞type，把你的其他類型封裝成一個變量，然后使用類型別名去定制變量的類型！

當然，類型別名可以很靈活的去定制：

????????type ArrType = number | string | boolean | null | undefined;

????????let arr: ArrType[] = [ ];

提示：類型別名建議首字母大寫

五、TypeScript類型約束--函數

函數創建好之后需要參數以及有返回值，在TS中就需要對參數和返回值做類型限制：

????????- 函數聲明語法格式：

????????????????function 函數名(參數1: 類型, 參數2: 類型)：返回值類型 { 函數體 }

???????????????? function count( param1: number, param2: number ): number { return a + b; }

????????- 函數表達式語法格式：

????????????????let 函數名 = function(參數1: 類型, 參數2: 類型)：返回值類型 { 函數體 }

????????????????let count = function( param1: number, param2: number ): number { return a + b; }

????????- 箭頭函數語法格式：

????????????????let 函數名 = (參數1: 類型, 參數2: 類型)：返回值類型 => { 函數體 }

????????????????let count = ( param1: number, param2: number ): number => { return a + b; }

注意：TS下的箭頭函數就算只有一個參數，也不能省略小括號！否則會有語法錯?? ?誤。

????????- 函數參數不固定的情況

????????????????對于有些函數，某些參數的情況可能不固定，有可能傳有可能不傳，如果不做處理的話，程序會報錯

????????????????

????????????????針對這種情況，可以使用 “？”來定制可選參數：

????????????????

????????????????并且注意，在可選參數之后，不能再出現必選參數了：

????????????????

????????????????對于ES6中的 reset 參數，當然也需要定義類型：

????????????????

????????????????reset就是一個數組，所以規定你程序必須的數組類型即可

????????- 函數的類型別名

????????????????函數的類型別名其實跟咱們以前的類型別名是一個道理，如果你需要定義多個參數相同、類型相同、返回值類型相同的函數，你的代碼會變成：

????????????????????????????????

????????????????針對這種情況，可以將參數類型以及返回值類型進行別名封裝，簡化代碼結構：

????????????????語法： type 函數類型別名 = (參數1: 類型，參數2：類型) => 返回值類型

????????????????

????????????????注意：函數的類型別名僅支持函數表達式寫法，不支持函數聲明寫法！????????

????????- void類型

????????????????在定義函數時，并不是每一個函數都會有返回值，有些函數是沒有返回值的，那么當沒有返回值的時候，一個函數的返回值類型應該是什么呢？

????????????????

????????????????通過一個沒有返回值的函數大家可以發現，函數的返回值是 void , 所以，對于沒有返回值的函數，他的默認返回值類型是void。

????????????????當然， 你可以主動指定他的返回值類型是void。

????????????????