建站
咨詢
售后
建站咨詢
新聞中心
Typescript 是一種很不錯(cuò)的語(yǔ)言。我用了差不多有兩年了，對(duì)這門(mén)語(yǔ)言還是挺喜歡的。它是 Javascript 的超集，但是遠(yuǎn)不止于此。Typescript 在日常開(kāi)發(fā)中非常好用，也有能幫我避免很多不必要的錯(cuò)誤。
創(chuàng)新互聯(lián)建站專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、甌海網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為甌海等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
以下是一些你可能還不知道的 Typescript 功能，這些功能很可能會(huì)在你的工作中派上用場(chǎng)。
@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ú)。
文章名稱：Typescript中你可能不知道的一些東西
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/djjgohd.html
