Typescript 是一種很不錯(cuò)的語(yǔ)言。我用了差不多有兩年了，對(duì)這門(mén)語(yǔ)言還是挺喜歡的。它是 Javascript 的超集，但是遠(yuǎn)不止于此。Typescript 在日常開(kāi)發(fā)中非常好用，也有能幫我避免很多不必要的錯(cuò)誤。

以下是一些你可能還不知道的 Typescript 功能，這些功能很可能會(huì)在你的工作中派上用場(chǎng)。

[[409175]]

@ts-expect-error

假設(shè)有下面這段代碼：

const multiply = (a:number,b:number) => a+b; 
multiply('12',13); 

但是 TS 編譯器會(huì)提示報(bào)錯(cuò)：Argument of type 'string' is not assignable to parameter of type你不能修改第一個(gè)參數(shù)的類型，并且暫時(shí)想要忽略 TS 編譯器報(bào)出的錯(cuò)誤，就可以用 @ts-ignore 來(lái)抑制錯(cuò)誤。

const multiply = (a:number,b:number) => a*b; 
// @ts-ignore 
multiply('12',13); 

當(dāng)你修復(fù)了錯(cuò)誤，并將傳給 multiply 函數(shù)的第一個(gè)參數(shù) '12' 改為 12 后：

const multiply = (a:number,b:number) => a+b; 
// @ts-ignore 
multiply(12,13); 

千萬(wàn)別忘了把我們之前使用的 @ts-ignore 指令刪除，因?yàn)樗鼤?huì)永遠(yuǎn)忽略下一行，除非你把它刪掉，否則將來(lái)可能會(huì)導(dǎo)致代碼出現(xiàn)錯(cuò)誤。

如果擔(dān)心自己忘記刪除，也可以用 @ts-expect-error 指令，它與 @ts-ignore 指令類似，不同的是一旦錯(cuò)誤被修復(fù)，TS 編譯器就會(huì)提示報(bào)錯(cuò)。

const multiply = (a:number,b:number) => a+b; 
// @ts-expect-error 
multiply(12,13); 

Unused '@ts-expect-error' directive.

這樣能夠提醒你在修復(fù)錯(cuò)誤后立即刪除指令。

never 類型

假設(shè)有一個(gè)接受錯(cuò)誤狀態(tài)碼并根據(jù)狀態(tài)拋出錯(cuò)誤的函數(shù)，在這種情況下，當(dāng) function 不會(huì)正常結(jié)束時(shí)，never 類型就派上用場(chǎng)了。

never 和 void 之間的區(qū)別是：void 意味著至少要返回一個(gè) undefined 或 null，而 never 意味著不會(huì)正常執(zhí)行到函數(shù)的終點(diǎn)。

function throwError(error: string): never {  
        throw new Error(error);  
}  

模板文字類型模板文字類型類似于 javascript 中的字符串類型，但是特定于類型。假設(shè)你想實(shí)現(xiàn)一個(gè)彈出框的庫(kù)，并且有一個(gè)用于定位彈出框的類型：

type popoverPositions = 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center'; 

但是在實(shí)際使用中，對(duì)這些類型進(jìn)行排列組合會(huì)讓你抓狂。

通過(guò)使用模板字面量類型，你可以很方便的進(jìn)行分解并組合類型，這樣就可以得倒包含所有可能組合出的新類型了：

type positions = 'top'|'bottom'|'center'; 
type directions = 'left'|'right'|'center' 
type popoverPositions = positions | directions | `${positions}-${directions}` 

生成所有類型為：

type popoverPositions = positions | directions | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-left" | "center-right" 

空斷言

空斷言用來(lái)告訴 TS 編譯器你的值既不是 null 也不是 undefined。假設(shè)已經(jīng)把值初始化為：

let myNumber:null | number = null; 

但是稍后要更新 myNumber 的值：

myNumber = 69; 

假設(shè)我們有一個(gè)只接受 number 類型的函數(shù)，

const add = (a:number,b:number) => { 
    return a + b; 
} 
add(myNumber,1); 

這時(shí)編譯器會(huì)報(bào)錯(cuò)：Argument of type 'null' is not assignable to parameter of type 'number'.所以在這里，可以在變量末尾使用帶有 ! 的空斷言，告訴編譯器傳入的值不為空。

const add = (a:number,b:number) => { 
    return a + b; 
} 
add(myNumber!,1); 

上面的代碼能夠編譯成功。

合并接口

Megring Interfaces 是 declaration merging 的類型，當(dāng)你有兩個(gè)同名的interfece 時(shí)，它能夠?qū)⑺鼈兒喜橐粋€(gè)單獨(dú)的接口

interface Box { 
  height: number; 
  width: number; 
} 
interface Box { 
  scale: number; 
} 
let box: Box = { height: 5, width: 6, scale: 10 }; 

所以在這里，可以創(chuàng)建兩個(gè)同名的獨(dú)立接口，然后把它們合并為一個(gè)接口，并且可以按照上面的例子使用。

總結(jié)

TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類型系統(tǒng)和對(duì) ES6 的支持，盡管有一些學(xué)習(xí)成本，但是如果我們能夠善用這種語(yǔ)言的類型系統(tǒng)和保護(hù)機(jī)制，就能夠避免 JavaScript 的一些坑，并減少對(duì)代碼的維護(hù)成本，空出跟多的時(shí)間來(lái)摸魚(yú)。