用30張圖帶你快速瞭解TypeScript

前言

每個月都會有總結和分享會,這個月也一樣

於是我將近段時間的、關於TS的學習筆記梳理成30張腦圖做了這次分享,也方便以後查閱

本文特點✨:

以圖的形式,言簡意賅的彙總TS相關知識點

附高畫質原圖及原始檔,可二次修改

備註:本文以基礎為主,大佬請左轉

正文

30張腦圖

常見的基本型別

我們知道TS是JS的超集,那我們先從幾種JS中常見的資料型別說起,當然這些型別在TS中都有相應的,如下:

用30張圖帶你快速瞭解TypeScript

特殊型別

除了一些在JS中常見的型別,也還有一些TS所特有的型別

用30張圖帶你快速瞭解TypeScript

型別斷言和型別守衛

如何在執行時需要保證和檢測來自其他地方的資料也符合我們的要求,這就需要用到斷言,而斷言需要型別守衛

用30張圖帶你快速瞭解TypeScript

介面

介面本身只是一種規範,裡頭定義了一些必須有的屬性或者方法,介面可以用於規範function、class或者constructor,只是規則有點區別

用30張圖帶你快速瞭解TypeScript

類和修飾符

很JS一樣,類class出現的目的,其實就是把一些相關的東西放在一起,方便管理

TS主要也是透過class關鍵字來定義一個類,並且它還提供了3個修飾符

用30張圖帶你快速瞭解TypeScript

類的繼承和抽象類

TS中的繼承ES6中的類的繼承極其相識,子類可以透過extends關鍵字繼承一個類

但是它還有抽象類的概念,而且抽象類作為基類,不能new

用30張圖帶你快速瞭解TypeScript

泛型

將泛型理解為寬泛的型別,它通常用於類和函式

但不管是用於類還是用於函式,核心思想都是:把型別當一種特殊的引數傳入進去

用30張圖帶你快速瞭解TypeScript

型別推斷

在TS中是有型別推論的,即在有些沒有明確指出型別的地方,型別推論會幫助提供型別

用30張圖帶你快速瞭解TypeScript

函式型別

為了讓我們更容易使用,TS為函式添加了型別等

用30張圖帶你快速瞭解TypeScript

數字列舉和字串列舉

列舉的好處是,我們可以定義一些帶名字的常量,而且可以清晰地表達意圖或建立一組有區別的用例

TS支援數字的和基於字串的列舉

用30張圖帶你快速瞭解TypeScript

型別相容性

TS裡的型別相容性是基於結構子型別的

用30張圖帶你快速瞭解TypeScript

聯合型別和交叉型別

補充兩個TS的型別:聯合型別和交叉型別

用30張圖帶你快速瞭解TypeScript

for。。of和for。。in

TS也支援for。。of和for。。in,但你知道他們兩個主要的區別嗎

用30張圖帶你快速瞭解TypeScript

模組

TS的模組化沿用了JS模組的概念,模組是在自身的作用域中執行,在一個模組裡的變數,函式,類等等在模組外部是不可見的,除非你明確地使用export形式之一匯出它們

用30張圖帶你快速瞭解TypeScript

名稱空間的使用

使用名稱空間的方式,其實非常簡單,格式如下: namespace X {}

用30張圖帶你快速瞭解TypeScript

解決單個名稱空間過大的問題

用30張圖帶你快速瞭解TypeScript

簡化名稱空間

要簡化名稱空間,核心就是給常用的物件起一個短的名字

TS中使用import為指定的符號建立一個別名,格式大概是:import q = x。y。z

用30張圖帶你快速瞭解TypeScript

規避2個TS中名稱空間和模組的陷阱

用30張圖帶你快速瞭解TypeScript

模組解析流程

模組解析是指編譯器在查詢匯入模組內容時所遵循的流程

流程大致如下:

用30張圖帶你快速瞭解TypeScript

相對和非相對模組匯入

相對和非相對模組匯入主要有以下兩點不同

用30張圖帶你快速瞭解TypeScript

Classic模組解析策略

TS的模組解析策略,其中的一種就叫Classic

用30張圖帶你快速瞭解TypeScript

Node。js模組解析過程

為什麼要說Node。js模組解析過程,其實是為了講TS的另一種模組解析策略做鋪墊——-Node模組解析策略。

因為Node模組解析策略就是一種試圖在執行時模仿Node。js模組解析的策略

用30張圖帶你快速瞭解TypeScript

Node模組解析策略

Node模組解析策略模仿Node。js執行時的解析策略來在編譯階段定位模組定義檔案的模組解析的策略,但是跟Node。js會有點區別

用30張圖帶你快速瞭解TypeScript

宣告合併之介面合併

宣告合併指的就是編譯器會針對同名的宣告合併為一個宣告

宣告合併包括介面合併,介面的合併需要區分接口裡面的成員有函式成員和非函式成員,兩者有差異

用30張圖帶你快速瞭解TypeScript

合併名稱空間

名稱空間的合併需要分兩種情況:一是同名的名稱空間之間的合併,二是名稱空間和其他型別的合併

用30張圖帶你快速瞭解TypeScript

JSX模式

TS具有三種JSX模式:preserve,react和react-native

用30張圖帶你快速瞭解TypeScript

三斜線指令

三斜線指令其實上面有講過,像///

它的格式就是三條斜線後面跟一個標籤

用30張圖帶你快速瞭解TypeScript