Typescript 中你可能不知道的一些東西
Typescript 是一種很不錯的語言。我用了差不多有兩年了，對這門語言還是挺喜歡的。它是 Javascript 的超集，但是遠(yuǎn)不止于此。Typescript 在日常開發(fā)中非常好用，也有能幫我避免很多不必要的錯誤。
以下是一些你可能還不知道的 Typescript 功能，這些功能很可能會在你的工作中派上用場。
@ts-expect-error
假設(shè)有下面這段代碼：
- const multiply = (a:number,b:number) => a+b;
- multiply('12',13);
但是 TS 編譯器會提示報(bào)錯：Argument of type 'string' is not assignable to parameter of type你不能修改第一個參數(shù)的類型，并且暫時想要忽略 TS 編譯器報(bào)出的錯誤，就可以用 @ts-ignore 來抑制錯誤。
- const multiply = (a:number,b:number) => a*b;
- // @ts-ignore
- multiply('12',13);
當(dāng)你修復(fù)了錯誤，并將傳給 multiply 函數(shù)的第一個參數(shù) '12' 改為 12 后：
- const multiply = (a:number,b:number) => a+b;
- // @ts-ignore
- multiply(12,13);
千萬別忘了把我們之前使用的 @ts-ignore 指令刪除，因?yàn)樗鼤肋h(yuǎn)忽略下一行，除非你把它刪掉，否則將來可能會導(dǎo)致代碼出現(xiàn)錯誤。
如果擔(dān)心自己忘記刪除，也可以用 @ts-expect-error 指令，它與 @ts-ignore 指令類似，不同的是一旦錯誤被修復(fù)，TS 編譯器就會提示報(bào)錯。
- const multiply = (a:number,b:number) => a+b;
- // @ts-expect-error
- multiply(12,13);
Unused '@ts-expect-error' directive.
這樣能夠提醒你在修復(fù)錯誤后立即刪除指令。
never 類型
假設(shè)有一個接受錯誤狀態(tài)碼并根據(jù)狀態(tài)拋出錯誤的函數(shù)，在這種情況下，當(dāng) function 不會正常結(jié)束時，never 類型就派上用場了。
never 和 void 之間的區(qū)別是：void 意味著至少要返回一個 undefined 或 null，而 never 意味著不會正常執(zhí)行到函數(shù)的終點(diǎn)。
- function throwError(error: string): never {
- throw new Error(error);
- }
模板文字類型模板文字類型類似于 javascript 中的字符串類型，但是特定于類型。假設(shè)你想實(shí)現(xiàn)一個彈出框的庫，并且有一個用于定位彈出框的類型：
- type popoverPositions = 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center';
但是在實(shí)際使用中，對這些類型進(jìn)行排列組合會讓你抓狂。
通過使用模板字面量類型，你可以很方便的進(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"
空斷言
空斷言用來告訴 TS 編譯器你的值既不是 null 也不是 undefined。假設(shè)已經(jīng)把值初始化為：
- let myNumber:null | number = null;
但是稍后要更新 myNumber 的值：
- myNumber = 69;
假設(shè)我們有一個只接受 number 類型的函數(shù)，
- const add = (a:number,b:number) => {
- return a + b;
- }
- add(myNumber,1);
這時編譯器會報(bào)錯：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)你有兩個同名的interfece 時，它能夠?qū)⑺鼈兒喜橐粋€單獨(dú)的接口
- interface Box {
- height: number;
- width: number;
- }
- interface Box {
- scale: number;
- }
- let box: Box = { height: 5, width: 6, scale: 10 };
所以在這里，可以創(chuàng)建兩個同名的獨(dú)立接口，然后把它們合并為一個接口，并且可以按照上面的例子使用。
總結(jié)
TypeScript 是 JavaScript 的一個超集，主要提供了類型系統(tǒng)和對 ES6 的支持，盡管有一些學(xué)習(xí)成本，但是如果我們能夠善用這種語言的類型系統(tǒng)和保護(hù)機(jī)制，就能夠避免 JavaScript 的一些坑，并減少對代碼的維護(hù)成本，空出跟多的時間來摸魚。
