###### tags: `Typescript` # 介紹 1. 為強型別語言,用來強化 JavaScript ,與 C# 一樣是由微軟推出,因此有許多共同點。 2. 透過類型檢查器 tsc 來運行。 3. 避免使用 any # <基礎知識> ### 靜態類型檢查 意旨在未運行程式碼時。先透過靜態類型檢查器(tsc)可以幫我們提前找出錯誤。 TypeScript ![](https://i.imgur.com/rDF5uV9.png) 需要使用npm相關指令時,需先下載node.js 至終端輸入tsc*main.js 若出現 tsc : 因為這個系統上已停用指令碼執行,所以無法載入... 則Set-ExecutionPolicy RemoteSigned node本身支援ts,但目前主流瀏覽器不支援ts故ts需編譯成js在輸出 tuple: let employee: [number, string] = [1, "Steve"]; 是一種固定長度固定類型的array,使用push()可使長度增加 # <字面量類型> let literal : 0 | 1 | 2 # <unknown 型別> unknown 型別可以想像成只能 set-only 的 any 型別。依樣可以指派任何型別的值給 unknown,但要對 unknown 型別操作時,必須轉成 unknown 以外的型別(配合typeof 使用),否則便會出錯。此外, unknown 只能指派給同樣是 unknown 型別或是 any 型別,不像 any 型別可以指派給 string、number 等任何型別。 # <Never> 1.應該要回傳,但卻沒有回傳值的函式(例如:如果函式內有無窮迴圈,沒有任何結束的執行點) 2.總是會拋出錯誤的函式 在contrsuctor(x?:number,y?:string) 意旨之後可將x,y轉成可選參數 Webpack它可以將許多檔案或許多語言,整合成網頁所需要的檔案 ![](https://i.imgur.com/0b1bkDR.png) # <顯式類型> 在右側宣告其類型 如下: ![](https://i.imgur.com/gsOKIVd.png) 當類型明確時,不需要添加類型注釋,如下: ![](https://i.imgur.com/KQBZnN9.png) # <嚴格模式 noImplicitAny> 將對任何類型隱式推斷為 any 的變量發出錯誤 --- # <日常類型> ### 常見基本類型 string、number、boolean ### 文字類型 ![](https://i.imgur.com/etNS6ba.png) 原理類似 Enum , 將參數 aligment 限制在 left、right、center ### 對像類型 對象類型指的是物件 如下: ![](https://i.imgur.com/vbcrFmo.png) ### 聯合類型 只要符合定義類型中的任何一種的值,就可以成立 如下: ![](https://i.imgur.com/Oeuklcb.png) > [`id.toUpperCase()` -> 此狀況會出錯,因為 toUpperCase() 只滿足 id 為 string ,因此可以使用收窄來解決此問題。] ### 類型別名(Type Alias) & 接口(Interface) ![](https://i.imgur.com/R8uWVfc.png) 1. 接口聲明是命名對像類型的另一種方式 2. 類型別名才可使用到原始型別、枚舉、元祖 3. 希望資料動態且可以擴展的會使用接口 共同點:皆可用來表示物件/函式,可選屬性(Optional Properties)、唯獨屬性(Read-only Properties)、任意屬性 ### 可選屬性 變數後面加上問號,用途為定義不一定用的到的屬性,如果存在時則幫它約束類型 如下: ![](https://i.imgur.com/Ig5moow.png) --- # <泛型> ### 泛型介紹 泛型能夠創建一個可以在多種類型而不是單一類型上工作的組件 ,是在C#、JAVA語言中可創建重用組件的工具之一 ![](https://i.imgur.com/U89xj8d.png) 第一個 Type 為泛型類,代表該函數使用泛型 第二個 Type 為參數類型 第三個 Type 為回傳類型 二三個 Type 一樣時,代表傳入什麼類型就該回傳相同的類型 ### 通用約束 Ts 使用 Extend 關鍵字來約束泛型類型、C# 則使用 Where ![](https://i.imgur.com/wylh2Fa.png) 藉由在泛型類使用 entends 關鍵字拓展來約束其類型,使 loggingIdentity 函數的泛型增加物件屬性 length,而擁有物件屬性 length 代表其類型可為 String, Array 等等 ### 在泛型約束中使用類型參數 使用目的為排除使用者輸入錯誤的屬性名稱導致不預期的錯誤 keyof 關鍵字為把對像類型(物件)提取其屬性名稱並且用聯合方式顯示 ``` type Point = { x: number; y: number }; type P = keyof Point; ``` 則 P = "number | number" ![](https://i.imgur.com/WVoalc9.png) --- # <類別、修飾符> ![](https://i.imgur.com/cO1Irsb.png) ### public: 類別成員默認修飾符為 public ,可以在任何地方訪問有 public 的成員 ### private: 命名方式-_lowerCamelCase 只有宣告該成員的類別內部可以使用 ### protected: 只有宣告該成員的類別內部可以使用,以及繼承的子類可以訪問 ### static: 1. 一開始載入時就存在且佔據記憶體 2. 不能也不用new就可以使用(因為已經占據記憶體了) 3. static的成員是大家共享的(使用同一區記憶體) 使用時機: 多個地方需要使用到同個 Function 或 Class ### 建構式(constructor): 在物件建立時會呼叫一次,如果有修飾符 static,則不管呼叫幾次都只有執行一次