TypeScript(五) —— 類型知識補充

目錄

• 隱式類型推斷

• 類型斷言

  • 方法一：as 關鍵詞
  • 方法二：尖括號斷言

• 類型聲明(declare)

  • 聲明步驟
  • 使用第三方庫lodash
  • 使用第三方庫query-string
• TypeScript學習地圖

以前講語法，以爲這些既屬於語法，可是不是特殊的類型，一時間不知道怎麼分類，因此就作爲類型補充知識。

隱式類型推斷

隱式類型推斷 ： 若是咱們沒有明確經過類型註解去標註這個變量的類型，那麼TypeScript根據一些能夠推斷出這個類型。

下面這個例子：

若是咱們沒有設定類型，賦值了一個數字，那麼會推斷這個爲number類型，以後再賦值爲字符串，就會報類型錯誤。

若是TypeScript沒法推斷這個變量的類型，就會定爲any，後面賦值什麼類型均可以。

開發的時候仍是建議你們爲每一個變量添加明確的類型，爲了後期更直觀的理解代碼。

類型斷言

TypeScript有時沒法推斷出來一些變量的類型，可是咱們能夠明確知道，因此有些時候它給了咱們一些不肯定選項的時候咱們能夠斷言成肯定的類型。使用類型斷言就能夠輔助ts更加明確每一個變量的類型。

TypeScript類型斷言不是類型轉換，類型轉換是在運行階段，斷言是在編譯階段，編譯事後斷言就不存在了。

舉個例子：

const nums = [110, 120, 119, 112]
// 下面返回的 res ，ts認爲多是number，也多是undefined
const res = nums.find(i => i > 0)

// 若是下面要對res進行運算，res直接運算就會報錯
const square = res * res // 報錯，就要斷言它爲number類型才行

方法一：as 關鍵詞

使用as就能夠明確num1是一個數字，下面就可使用數字運算

const num1 = res as number

方法二：尖括號斷言

這個尖括號和jsx的標籤產生衝突，那種狀況不推薦使用

const num2 = <number>res

類型聲明(declare)

開發過程當中咱們會用到第三方模塊，這些模塊並不都是用typeScript編寫的，因此它的成員可能就沒有強類型體驗。

聲明步驟

1. 若是有typescript匹配的類型聲明，能夠直接使用
2. 若是沒有就只能手動進行類型聲明（declare）
3. 能夠在社區中有能夠直接npm下載對的類型聲明模塊，安裝使用

存在的緣由是爲了兼容普通的js模塊.

使用第三方庫lodash

使用lodash舉例子，lodash自己沒有集成類型聲明，因此使用的時候會報錯。咱們能夠本身手動進行類型聲明

下面的函數，直接調用camelCase沒有類型提示，因此在前面添加declare對函數camelCase進行參數和返回值的限制，這樣能夠看到這個函數有了類型的提示

那上面的lodash仍是報錯，那麼咱們看可能須要下一些東西進行兼容，由於TS社區比較強大，大部分的第三方模塊都有對應的類型聲明，直接安裝其對應的類型聲明模塊(通常是@types/模塊名)便可.

類型聲明是開發依賴，裏面不會提供任何的代碼，只是對模塊作對應的類型聲明

安裝

# yarn
yarn add @types/lodash --dev
# npm
npm i @types/lodash

安裝以後lodash可看到裏面有不少.d.ts的類型聲明文件，對應的代碼中就有對應的類型聲明提示了

使用第三方庫query-string

query-string —— 解析query中的url字符串

自己包裏面集成了類型聲明文件，不須要額外再安裝。

# yarn
yarn add query-string
# npm
npm i query-string

使用的時候看到有類型聲明的介紹

TypeScript學習地圖