建站
咨詢
售后
建站咨詢
新聞中心
Typescript 是一種很不錯的語言。我用了差不多有兩年了，對這門語言還是挺喜歡的。它是 Javascript 的超集，但是遠不止于此。Typescript 在日常開發(fā)中非常好用，也有能幫我避免很多不必要的錯誤。
創(chuàng)新互聯(lián)建站專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、甌海網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為甌海等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
以下是一些你可能還不知道的 Typescript 功能，這些功能很可能會在你的工作中派上用場。
@ts-expect-error
假設(shè)有下面這段代碼：
- const multiply = (a:number,b:number) => a+b;
- multiply('12',13);
但是 TS 編譯器會提示報錯：Argument of type 'string' is not assignable to parameter of type你不能修改第一個參數(shù)的類型，并且暫時想要忽略 TS 編譯器報出的錯誤，就可以用 @ts-ignore 來抑制錯誤。
- const multiply = (a:number,b:number) => a*b;
- // @ts-ignore
- multiply('12',13);
當你修復(fù)了錯誤，并將傳給 multiply 函數(shù)的第一個參數(shù) '12' 改為 12 后：
- const multiply = (a:number,b:number) => a+b;
- // @ts-ignore
- multiply(12,13);
千萬別忘了把我們之前使用的 @ts-ignore 指令刪除，因為它會永遠忽略下一行，除非你把它刪掉，否則將來可能會導(dǎo)致代碼出現(xiàn)錯誤。
如果擔心自己忘記刪除，也可以用 @ts-expect-error 指令，它與 @ts-ignore 指令類似，不同的是一旦錯誤被修復(fù)，TS 編譯器就會提示報錯。
- 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ù)，在這種情況下，當 function 不會正常結(jié)束時，never 類型就派上用場了。
never 和 void 之間的區(qū)別是：void 意味著至少要返回一個 undefined 或 null，而 never 意味著不會正常執(zhí)行到函數(shù)的終點。
- function throwError(error: string): never {
- throw new Error(error);
- }
模板文字類型模板文字類型類似于 javascript 中的字符串類型，但是特定于類型。假設(shè)你想實現(xiàn)一個彈出框的庫，并且有一個用于定位彈出框的類型：
- 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。假設(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);
這時編譯器會報錯：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 時，它能夠?qū)⑺鼈兒喜橐粋€單獨的接口
- interface Box {
- height: number;
- width: number;
- }
- interface Box {
- scale: number;
- }
- let box: Box = { height: 5, width: 6, scale: 10 };
所以在這里，可以創(chuàng)建兩個同名的獨立接口，然后把它們合并為一個接口，并且可以按照上面的例子使用。
總結(jié)
TypeScript 是 JavaScript 的一個超集，主要提供了類型系統(tǒng)和對 ES6 的支持，盡管有一些學(xué)習(xí)成本，但是如果我們能夠善用這種語言的類型系統(tǒng)和保護機制，就能夠避免 JavaScript 的一些坑，并減少對代碼的維護成本，空出跟多的時間來摸魚。
網(wǎng)站欄目：Typescript中你可能不知道的一些東西
標題路徑：http://www.dlmjj.cn/article/djjgohd.html
