從開發角度來講, <code>TypeScript</code> 作為強類型語言，對屬性有類型限制。在日常開發中少了減少了不必要的因參數類型造成的<code>BUG</code>,當你在使用同僚封裝好的函數時，類型不知道怎麼傳遞，在開發<code>TS</code> 時，它會有很友好類型的提示，此時你就知道該函數需要傳遞哪些參數，并且參數類型是什麼類型。
從項目結構來講, 使用<code>TypeScript</code> 可以很好的管控項目，通過建立各個子產品的類型管理，通過<code>interface</code> 或者 <code>類型斷言</code> 來管理項目中類型，在對應的子產品使用類型，當項目需要疊代更新時，隻需要進行對對應的子產品類型進行更改。
從前端全局觀來講，社群三大架構早已結合<code>TypeScript</code> 了， 社群也很完善，已經過了 <code>該不該學習TypeScript 的階段了</code>。
去年還有很多朋友猶豫用不用學習<code>TypeScript</code> , 很多被社群朋友發的文章誤導， <code>TypeScript</code> 就是 <code>AnyScript</code>。
2.png
<code>TypeScript</code> 對沒有接觸過 強類型語言的朋友有點學習成本，而且在使用<code>TypeScript</code> 進行開發時，前期可能代碼會很臃腫，讓你覺得看起來有很多 <code>無用的代碼</code> ， 不過在後期，你就可以感覺到 <code>TypeScript</code> 給你帶來的樂趣了。
學會 <code>TypeScript</code>也對你在職場競争有點優勢，在跳槽時，假如你已經使用 <code>TypeScript</code> 結合 架構 做過一些項目，面試官也會優先考慮你的，薪水進而也提升了。
前端之路還有很長，新的技術/架構更新頻率很快， 最終還是離不開 <code>JavaScript</code>。
下面，我們一起來看看 <code>TypeScript</code>,本文是對标 <code>TypeScript</code> 文檔進行來講解，更加大白話的簡單講述<code>如何使用TypeScript</code> .
reWaP1.png
它表示 已經 元素的個數和元素類型的數組，各個元素類型可以不一樣。
<code>enum</code>類型是對JavaScript标準資料類型的一個補充。 如果沒有給枚舉指定索引的話，預設為 0 ， 通過 <code>枚舉對象[索引]</code> 可以擷取值 如果指定了枚舉索引為字元串的話，通過 <code>枚舉.屬性</code> 擷取的 它的值
any 為 任意類型，一般在擷取dom 使用
never 代表不存在的值類型，常用作為 抛出異常或者 無限循環的函數傳回類型
void 為 函數沒有類型，一般用在沒有傳回值的函數
什麼是類型斷言？ 有時候你在定義一個變量時，起初是不知道是什麼類型，但在使用過程中知道是什麼類型，這時就會用到類型斷言了。
TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 驗證類型時，順序不影響驗證。 簡單的來說，它是類型限制的定義，當你使用這個定義接口時，它會一一匹對接口中定義的類型。 隻要不滿足接口中的任何一個屬性，都不會通過的。
有時候，接口屬性不是必須全部需要的，滿足某些條件才會需要，這時，就可以采用可選屬性 格式 ： <code>屬性 ?: 類型</code>
隻讀屬性： 意味着給屬性指派了後，不可改變。 格式： <code>readonly 屬性 : 類型</code>
用來限制函數傳遞參數類型 函數類型的類型檢查來說，函數的參數名不需要與接口裡定義的名字相比對。 格式： <code>(參數1： 類型，參數2：類型) ： 傳回值類型</code>
在定義一個數組時，可以定義一個 索引類型接口，這樣就限制了它必須傳遞哪些類型的值。 通路: <code>通過 變量[索引]</code>
接口描述了類的公共部分，而不是公共和私有兩部分。 它不會幫你檢查類是否具有某些私有成員。
接口之間可以互相繼承，這樣可以更靈活地将接口分割到可重用的子產品裡。
當接口繼承了一個類，那麼接口也會擁有類的屬性和方法。 當别的類 實作這個 接口時，會同時實作 接口的屬性和方法， 繼承類的屬性和方法
接觸過JAVA 的同學，應該對這個不陌生，非常熟了。 作為前端的我們，可能第一 次聽這個概念。 通過 字面意思可以看出，它指代的類型比較廣泛。 作用： : 避免重複代碼，代碼備援 但是它和 any 類型 還是有差別的。 any 類型： 如果一個函數類型為any，那麼它的參數可以是任意類型，一般傳入的類型與傳回的類型應該是相同的。如果傳入了一個 string 類型的參數，那麼我們也不知道它傳回啥類型。 泛型 ： 它可以使 <code>傳回類型 和 傳入類型</code> 保持一緻，這樣我們可以清楚的知道函數傳回的類型為什麼類型。
泛型接口可以這樣了解： 當你需要給接口指定類型時，但目前不知道屬性類型為什麼時，就可以采用泛型接口 你可以給接口指定參數為多個泛型類型，也可以單個；當使用時，明确參數類型即可。
reJsYR.png
定義泛型函數，可以讓 傳入參數類型參數 和 傳回值類型保持一緻。 泛型 标志一般用字母大寫，T 可以随意更換
什麼是泛型類 它規定了類中屬性和方法的 類型，而且必須和類型定義的類型保持一緻。 泛型類的作用 可以幫助我們确認類的所有屬性都在使用相同的類型 使用格式
接口限制 通過定義接口， 泛型函數繼承接口，則參數必須實作接口中的屬性，這樣就達到了泛型函數的限制 類限制 通過給類的泛型指定為另一個類，這樣就規定了類泛型的類型都為另一個類
說到類，做後端的朋友應該都了解，前端 在ES6 中，才出現了 類 Class 這個關鍵詞。 Class 有哪些特征 屬性 構造器 方法 繼承 <code>extends</code> 屬性 / 方法 修飾符 靜态屬性 抽象類 存取器 <code>getters/setters</code>
當屬性 / 方法 修飾符為 public 時， 如果前面沒有，預設會加上，我們可以自由的通路程式裡定義的成員。
當成員被标記成 <code>private</code>時，它就不能在聲明它的類的外部通路。
<code>protected</code>修飾符與 <code>private</code>修飾符的行為很相似，但有一點不同， <code>protected</code>成員在派生類中仍然可以通路,不可以通過執行個體來通路受保護的屬性。
類的靜态成員(屬性 和 方法) 隻能通過 類來可以通路。 定義： static 屬性 / static 方法
繼承的本意很好了解，當子類繼承了父類，那麼子類就擁有了父類的特征(屬性) 和 行為(方法)，
抽象類可以包含成員的實作細節。 <code>abstract</code>關鍵字是用于定義抽象類和在抽象類内部定義抽象方法。 抽象類中的抽象方法不包含具體實作并且必須在派生類中實作。
函數類型包括 <code>參數類型 和 傳回值類型</code>
每個參數添加類型之後再為函數本身添加傳回值類型. TypeScript能夠根據傳回語句自動推斷出傳回值類型，是以我們通常省略它。 下面會介紹在TS 中，兩種寫函數的格式
JavaScript裡，每個參數都是可選的，可傳可不傳。 沒傳參的時候，它的值就是undefined。 在TypeScript裡我們可以在參數名旁使用 <code>?</code>實作可選參數的功能。 可選參數必須放在必須參數後面。
預設參數，在傳遞參數時，指定預設值
有時，你想同時操作多個參數，或者你并不知道會有多少參數傳遞進來。 在JavaScript裡，你可以使用 <code>arguments</code>來通路所有傳入的參數。 在TypeScript 中，可以把所有參數集中在一個變量中，前面加上<code>...</code> 表示 剩餘參數。 注意 直接通過變量通路 也可以通過索引通路 隻能定義一個剩餘參數，且位置在 預設參數和可選參數後面
枚舉可以清晰地表達一組對應關系。 TypeScript支援數字的和基于字元串的枚舉。
預設枚舉的順序以 0 開頭，然後自動遞增。 枚舉順序也可以指定 值， 指定後，它前面第一個還是以0 遞增 通路 通過 <code>枚舉名.屬性</code> 通路到的是 <code>序号</code> 通過 <code>枚舉名[序号]</code> 通路到的是 <code>屬性名</code>
它指 可以将多個類型合并為一個類型。辨別符為 <code>&</code> , 當指定一個變量類型為 交叉類型時，那麼它擁有交叉類型的所有屬性，也就是并集。
聯合類型表示一個值可以是幾種類型之一。 用豎線（ <code>|</code>）分隔每個類型。 一個值是聯合類型，我們隻能通路此聯合類型的所有類型裡共有的成員。
子產品： 定義的變量，函數，類等等，隻能在自身的作用域裡使用。 如果想在外部通路使用，那麼必須使用<code>export</code> 将其導出即可。 使用子產品： 通過 <code>import</code> 将子產品内容導入即可使用。 子產品是自聲明的；兩個子產品之間的關系是通過在檔案級别上使用imports和exports建立的。 子產品使用子產品加載器去導入其它的子產品。 在運作時，子產品加載器的作用是在執行此子產品代碼前去查找并執行這個子產品的所有依賴。
任何聲明（比如變量，函數，類，類型别名或接口）都能夠通過添加<code>export</code>關鍵字來導出。 <code>導出可以對任何聲明 進行重命名，防止命名沖突， 通過 as 來修改</code>
通常一個大的子產品是多個子子產品組成的。那麼我們可以通過 在大的子產品中導入多個子子產品。 格式： <code>export * from "子產品"</code> 使用組合子產品： <code>import * as 重命名變量 from ‘組合子產品路徑’</code>
每個子產品都可以有一個<code>default</code>導出。 預設導出使用 <code>default</code>關鍵字标記；并且一個子產品隻能夠有一個<code>default</code>導出。
CommonJS和AMD的環境裡都有一個<code>exports</code>變量，這個變量包含了一個子產品的所有導出内容。 CommonJS和AMD的<code>exports</code>都可以被指派為一個<code>對象</code> <code>exports 和 export default</code> 用途一樣，但是 <code>export default</code> 文法不能相容CommonJS和AMD的<code>exports</code>。 在TypeScript 中，為了達到這樣效果，可以這樣寫: 導出： <code>export =</code> 等于 <code>exports</code> 導入： <code>import module = require("module")</code>
定義 “内部子產品”稱為“命名空間” “外部子產品”稱為“子產品” 作用 減少命名沖突，将代碼組織到一個空間内，便于通路。 通過 <code>namespace 空間名 { }</code> ，内部通過 <code>export</code> 導出來使用内部成員
當應用變得越來越大時，我們需要将代碼分離到不同的檔案中以便于維護。 我們可以将命名空間檔案拆分成多個檔案，但是它們的命名空間名還是使用的同一個，各個檔案互相依賴使用。但是必須檔案最開頭引入 命名空間檔案。 格式: <code>/// <reference path="MS1.ts"/></code>
裝飾器是一種特殊類型的聲明，它能夠附加到類聲明、方法、通路符、屬性、類方法的參數上，以達到擴充類的行為。 自從 ES2015 引入 <code>class</code>，當我們需要在多個不同的類之間共享或者擴充一些方法或行為的時候，代碼會變得錯綜複雜，極其不優雅，這也是裝飾器被提出的一個很重要的原因。
類裝飾器 屬性裝飾器 方法裝飾器 參數裝飾器
類裝飾器表達式會在運作時當作函數被調用，類的構造函數作為其唯一的參數。 使用場景：應用于類構造函數，可以用來監視，修改或替換類定義。
作用于類屬性的裝飾器表達式會在運作時當作函數被調用，傳入下列3個參數 <code>target</code>、<code>name</code>、<code>descriptor</code>： <code>target</code>: 對于靜态成員來說是類的構造函數，對于執行個體成員是類的原型對象 <code>name</code>: 成員的名字 <code>descriptor</code>: 成員的屬性描述符
通過修飾器完成一個屬性隻讀功能，其實就是修改資料描述符中的 <code>writable</code> 的值 ：
更多精彩文章在首頁
文中如有錯誤，歡迎碼友在評論區指正，如果對你有所幫助，歡迎點贊和關注~~~