前端JavaScript 到 TypeScript

介紹:

TypeScript 並不是一個完全新的語言, 它是 JavaScript 的超集,為 JavaScript 的生態增加了類型機制,並最終將代碼編譯為純粹的 JavaScript 代碼,下圖展示了TypeScript與Javascript之間的關係

前端JavaScript 到 TypeScript

使用Typescript的原因

JavaScript 是一門弱類型語言,變量的數據類型具有動態性,只有執行時才能確定變量的類型,這樣出錯只能後知後覺,這樣不僅不能提升編程能力,還會降低開發效率,使用Typescript在編寫代碼時可以減少錯誤,從而提高我們的生產力。

數據類型

  • String 類型

字符串類型,聲明為string或String

前端JavaScript 到 TypeScript

  • Boolen 類型
前端JavaScript 到 TypeScript

  • Number 類型
前端JavaScript 到 TypeScript

  • Array 類型
前端JavaScript 到 TypeScript

  • Enums 類型

列出所有可用值,一個枚舉的默認初始值是0。你可以調整一開始的範圍:

前端JavaScript 到 TypeScript

  • Any 類型

any 是默認的類型,其類型的變量允許任何類型的值

前端JavaScript 到 TypeScript

  • Void 類型

JavaScript 沒有空值 Void 的概念,在 TypeScirpt 中,可以用 void 表示沒有任何返回值的函數

前端JavaScript 到 TypeScript

函數

  • 為函數定義類型

我們可以給每個參數添加類型之後再為函數本身添加返回值類型。 TypeScript能夠根據返回語句自動推斷出返回值類型,因此我們通常省略它。下面函數 add, add2, add3 的效果是一樣的,其中是 add3 函數是函數完整類型

前端JavaScript 到 TypeScript

  • 可選參數和默認參數

JavaScript 裡,每個參數都是可選的,可傳可不傳。 沒傳參的時候,它的值就是 undefined 。 在 TypeScript 裡我們可以在參數名旁使用?實現可選參數的功能。 比如,我們想讓 lastname 是可選的:

前端JavaScript 到 TypeScript

傳統的JavaScript程序使用函數和基於原型的繼承來創建可重用的組件,但對於熟悉使用面向對象方式的程序員來講就有些棘手,因為他們用的是基於類的繼承並且對象是由類構建出來的。 從ECMAScript 2015,也就是ECMAScript 6開始,JavaScript程序員將能夠使用基於類的面向對象的方式。 使用TypeScript,我們允許開發者現在就使用這些特性,並且編譯後的JavaScript可以在所有主流瀏覽器和平臺上運行,而不需要等到下個JavaScript版本。

前端JavaScript 到 TypeScript

  • 繼承

這個例子展示了 TypeScript 中繼承的一些特徵,可以看到其實也是 ES6 的知識上加上類型聲明。不過這裡多了一個知識點 —— 公共,私有,以及受保護的修飾符。TypeScript 裡,成員默認為 public ;當成員被標記成 private 時,它就不能在聲明它的類的外部訪問;protected 修飾符與private 修飾符的行為很相似,但有一點不同,protected 成員在派生類中仍然可以訪問。

前端JavaScript 到 TypeScript

  • 存儲器

TypeScript 支持通過 getters/setters 來截取對對象成員的訪問。 它能幫助你有效的控制對對象成員的訪問。對於存取器有下面幾點需要注意的:首先,存取器要求你將編譯器設置為輸出 ECMAScript 5 或更高。 不支持降級到 ECMAScript 3。 其次,只帶有 get 不帶有 set 的存取器自動被推斷為 readonly。 這在從代碼生成 .d.ts 文件時是有幫助的,因為利用這個屬性的用戶會看到不允許夠改變它的值。

前端JavaScript 到 TypeScript

  • 接口

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。在TypeScript裡,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

前端JavaScript 到 TypeScript

  • 可選屬性

帶有可選屬性的接口與普通的接口定義差不多,只是在可選屬性名字定義的後面加一個 ? 符號。可選屬性的好處之一是可以對可能存在的屬性進行預定義,好處之二是可以捕獲引用了不存在的屬性時的錯誤。

前端JavaScript 到 TypeScript

  • 函數類型

接口能夠描述 JavaScript 中對象擁有的各種各樣的外形。 除了描述帶有屬性的普通對象外,接口也可以描述函數類型。定義的函數類型接口就像是一個只有參數列表和返回值類型的函數定義。參數列表裡的每個參數都需要名字和類型。定義後完成後,我們可以像使用其它接口一樣使用這個函數類型的接口。

前端JavaScript 到 TypeScript

  • 可索引類型

與使用接口描述函數類型差不多,我們也可以描述那些能夠“通過索引得到”的類型,比如 a[10] 或 ageMap["daniel"]。 可索引類型具有一個索引簽名,它描述了對象索引的類型,還有相應的索引返回值類型。 讓我們看如下例子:

前端JavaScript 到 TypeScript

  • 類類型

與 C# 或 Java 裡接口的基本作用一樣,TypeScript 也能夠用它來明確的強制一個類去符合某種契約。我們可以在接口中描述一個方法,在類裡實現它,如同下面的 setTime 方法一樣:

前端JavaScript 到 TypeScript

  • 接口的繼承

和類一樣,接口也可以相互繼承。 這讓我們能夠從一個接口裡複製成員到另一個接口裡,可以更靈活地將接口分割到可重用的模塊裡。

前端JavaScript 到 TypeScript

  • 模塊

任何包含頂級 import 或者 export 的文件都被當成一個模塊

前端JavaScript 到 TypeScript

  • 泛型

如下代碼,我們給 Hello 函數添加了類型變量 T ,T 幫助我們捕獲用戶傳入的類型(比如:string)。我們把這個版本的 Hello 函數叫做泛型,因為它可以適用於多個類型。 代碼中 output 和 output2 是效果是相同的,第二種方法更加普遍,利用了類型推論 —— 即編譯器會根據傳入的參數自動地幫助我們確定T的類型:

前端JavaScript 到 TypeScript

相關推薦

推薦中...