原創 Typescript 中你可能不知道的一些東西

Typescript 是一種很不錯的語言。我用了差很少有兩年了，對這門語言仍是挺喜歡的。它是 Javascript 的超集，可是遠不止於此。 Typescript 在平常開發中很是好用，也有能幫我避免不少沒必要要的錯誤。

如下是一些你可能還不知道的 Typescript 功能，這些功能極可能會在你的工做中派上用場。

@ts-expect-error

假設有下面這段代碼：

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

可是 TS 編譯器會提示報錯： Argument of type 'string' is not assignable to parameter of type

你不能修改第一個參數的類型，而且暫時想要忽略 TS 編譯器報出的錯誤，就能夠用 @ts-ignore 來抑制錯誤。

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

當你修復了錯誤，並將傳給 multiply 函數的第一個參數 '12' 改成 12 後：

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

千萬別忘了把咱們以前使用的 @ts-ignore 指令刪除，由於它會永遠忽略下一行，除非你把它刪掉，不然未來可能會致使代碼出現錯誤。

若是擔憂本身忘記刪除，也能夠用 @ts-expect-error 指令，它與 @ts-ignore 指令相似，不一樣的是一旦錯誤被修復，TS 編譯器就會提示報錯。

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

Unused '@ts-expect-error' directive.

這樣可以提醒你在修復錯誤後當即刪除指令。

never 類型

假設有一個接受錯誤狀態碼並根據狀態拋出錯誤的函數，在這種狀況下，當 function 不會正常結束時，never 類型就派上用場了。

never 和 void 之間的區別是：void 意味着至少要返回一個 undefined 或 null，而 never 意味着不會正常執行到函數的終點。

function throwError(error: string): never { 
        throw new Error(error); 
} 
複製代碼

模板文字類型

模板文字類型相似於 javascript 中的字符串類型，可是特定於類型。假設你想實現一個彈出框的庫，而且有一個用於定位彈出框的類型：

type popoverPositions = 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center';
複製代碼

可是在實際使用中，對這些類型進行排列組合會讓你抓狂。

經過使用模板字面量類型，你能夠很方便的進行分解並組合類型，這樣就能夠得倒包含全部可能組合出的新類型了：

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"
複製代碼

空斷言

空斷言用來告訴 TS 編譯器你的值既不是 null 也不是 undefined。假設已經把值初始化爲：

let myNumber:null | number = null;

可是稍後要更新 myNumber 的值：

myNumber = 69;

假設咱們有一個只接受 number 類型的函數，

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

這時編譯器會報錯： 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 的類型，當你有兩個同名的interfece 時，它​​可以將它們合併爲一個單獨的接口

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

因此在這裏，能夠建立兩個同名的獨立接口，而後把它們合併爲一個接口，而且能夠按照上面的例子使用。

總結

TypeScript 是 JavaScript 的一個超集，主要提供了類型系統和對 ES6 的支持，儘管有一些學習成本，可是若是咱們可以善用這種語言的類型系統和保護機制，就可以避免 JavaScript 的一些坑，並減小對代碼的維護成本，空出跟多的時間來摸魚。

寫在最後

最後，推薦一套TS全系列的教程吧。 近期在提高TS，收藏了一套很不錯的教程，無償分享給xdm www.yidengxuetang.com/pub-page/in…