淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧

很多人對(duì)TypeScript的使用還停留在基本操作上,其實(shí)TypeScript的特性非常強(qiáng)大,我們利用好這些特性可以有效地提高代碼質(zhì)量、加速開(kāi)發(fā)效率，今天就介紹9個(gè)非常實(shí)用的TypeScript技巧或者特性.

注釋的妙用

我們可以通過(guò) /** */ 來(lái)注釋TypeScript的類(lèi)型，當(dāng)我們?cè)谑褂孟嚓P(guān)類(lèi)型的時(shí)候就會(huì)有注釋的提示，這個(gè)技巧在多人協(xié)作開(kāi)發(fā)的時(shí)候十分有用，我們絕大部分情況下不用去花時(shí)間翻文檔或者跳頁(yè)去看注釋。

巧用類(lèi)型推導(dǎo)

TypeScript 能根據(jù)一些簡(jiǎn)單的規(guī)則推斷（檢查）變量的類(lèi)型。

比如一個(gè)簡(jiǎn)單的add函數(shù)

function add(a: number, b: number) {
 return a + b
}

TypeScript就可以通過(guò)參數(shù)與return的運(yùn)算符推導(dǎo)出函數(shù)的返回值

如果想獲取函數(shù)整體的類(lèi)型那么可以借助 typeof

注意與JavaScript中的typeof區(qū)分開(kāi)

type AddFn = typeof add

當(dāng)然上述情況算是比較簡(jiǎn)單的情況，有時(shí)候我們的返回值類(lèi)型其實(shí)比較復(fù)雜，這個(gè)時(shí)候借助類(lèi)型推導(dǎo)和 ReturnType 就可以很輕松地獲取返回值類(lèi)型。

type returnType = ReturnType<typeof add> // number

上述技巧在對(duì)redux進(jìn)行編碼的時(shí)候非常適用，這樣可以省略我們大量的重復(fù)代碼，畢竟redux的編碼工作是非常繁瑣的。

巧用元組

有時(shí)候我們可能需要批量的來(lái)獲取參數(shù)，并且每一個(gè)參數(shù)的類(lèi)型還不一樣，我們可以聲明一個(gè)元組如：

function query(...args:[string, number, boolean]){
 const d: string = args[0];
 const n: number = args[1];
 const b: boolean = args[2];
}

巧用Omit

有時(shí)候我們需要復(fù)用一個(gè)類(lèi)型，但是又不需要此類(lèi)型內(nèi)的全部屬性，因此需要剔除某些屬性，這個(gè)時(shí)候 Omit 就派上用場(chǎng)了。

interface User {
 username: string
 id: number
 token: string
 avatar: string
 role: string
}
type UserWithoutToken = Omit<User, 'token'>

這個(gè)方法在React中經(jīng)常用到，當(dāng)父組件通過(guò)props向下傳遞數(shù)據(jù)的時(shí)候，通常需要復(fù)用父組件的props類(lèi)型，但是又需要剔除一些無(wú)用的類(lèi)型。

運(yùn)用Record

Record 是TypeScript的一個(gè)高級(jí)類(lèi)型，但是相關(guān)的文檔并不多，所以經(jīng)常被人忽略，但是是一個(gè)非常強(qiáng)大的高級(jí)類(lèi)型。

Record允許從Union類(lèi)型中創(chuàng)建新類(lèi)型，Union類(lèi)型中的值用作新類(lèi)型的屬性。

舉個(gè)簡(jiǎn)單的例子，比如我們要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的汽車(chē)品牌年齡表，一下寫(xiě)法貌似沒(méi)有問(wèn)題。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'

const cars = {
 Audi: { age: 119 },
 BMW: { age: 113 },
 MercedesBenz: { age: 133 },
}

雖然這個(gè)寫(xiě)法沒(méi)問(wèn)題，但是有沒(méi)有考慮過(guò)類(lèi)型安全的問(wèn)題？

比如：

• 我們忘記寫(xiě)了一個(gè)汽車(chē)品牌，他會(huì)報(bào)錯(cuò)嗎？
• 我們拼寫(xiě)屬性名錯(cuò)誤了，它會(huì)報(bào)錯(cuò)嗎？
• 我們添加了一個(gè)非上述三個(gè)品牌的品牌進(jìn)去，他會(huì)報(bào)錯(cuò)嗎？
• 我們更改了其中一個(gè)品牌的名字，他會(huì)有報(bào)錯(cuò)提醒嗎？

上述這種寫(xiě)法統(tǒng)統(tǒng)不會(huì)，這就需要Record的幫助。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'
type CarList = Record<Car, {age: number}>

const cars: CarList = {
 Audi: { age: 119 },
 BMW: { age: 113 },
 MercedesBenz: { age: 133 },
}

當(dāng)我們拼寫(xiě)錯(cuò)誤:

當(dāng)我們少些一個(gè)品牌:

當(dāng)我們添加了一個(gè)非約定好的品牌進(jìn)去:

在實(shí)戰(zhàn)項(xiàng)目中盡量多用Record，它會(huì)幫助你規(guī)避很多錯(cuò)誤，在vue或者react中有很多場(chǎng)景選擇Record是更優(yōu)解。

巧用類(lèi)型約束

在 .jsx 文件里，泛型可能會(huì)被當(dāng)做 jsx 標(biāo)簽

const toArray = <T>(element: T) => [element]; // Error in .jsx file.

加 extends 可破

const toArray = <T extends {}>(element: T) => [element]; // No errors.

交叉類(lèi)型

交叉類(lèi)型是將多個(gè)類(lèi)型合并為一個(gè)類(lèi)型。 這讓我們可以把現(xiàn)有的多種類(lèi)型疊加到一起成為一種類(lèi)型，它包含了所需的所有類(lèi)型的特性。

在 JavaScript 中，混入是一種非常常見(jiàn)的模式，在這種模式中，你可以從兩個(gè)對(duì)象中創(chuàng)建一個(gè)新對(duì)象，新對(duì)象會(huì)擁有著兩個(gè)對(duì)象所有的功能。交叉類(lèi)型可以讓你安全的使用此種模式：

聯(lián)合類(lèi)型

在 JavaScript 中，你希望屬性為多種類(lèi)型之一，如字符串或者數(shù)組。這就是聯(lián)合類(lèi)型所能派上用場(chǎng)的地方（它使用 | 作為標(biāo)記，如 string | number）。

function formatCommandline(command: string[] | string) {
 let line = '';
 if (typeof command === 'string') {
 line = command.trim();
 } else {
 line = command.join(' ').trim();
 }
}

類(lèi)型別名

類(lèi)型別名會(huì)給一個(gè)類(lèi)型起個(gè)新名字，類(lèi)型別名有時(shí)和接口很像，但是可以作用于原始值，聯(lián)合類(lèi)型，元組以及其它任何你需要手寫(xiě)的類(lèi)型。

類(lèi)型別名可以是泛型

type Container<T> = { value: T };

也可以使用類(lèi)型別名來(lái)在屬性里引用自己：

type Tree<T> = {
 value: T;
 left: Tree<T>;
 right: Tree<T>;
}

類(lèi)型別名看起來(lái)跟interface非常像，那么應(yīng)該如何區(qū)分兩者？

interface只能用于定義對(duì)象類(lèi)型，而type的聲明方式除了對(duì)象之外還可以定義交叉、聯(lián)合、原始類(lèi)型等，類(lèi)型聲明的方式適用范圍顯然更加廣泛。

但是interface也有其特定的用處：

• interface 方式可以實(shí)現(xiàn)接口的 extends 和 implemenjs
• interface 可以實(shí)現(xiàn)接口合并聲明

type Alias = { num: number }
interface Interface {
 num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;

此外，接口創(chuàng)建了一個(gè)新的名字，可以在其它任何地方使用。 類(lèi)型別名并不創(chuàng)建新名字—比如，錯(cuò)誤信息就不會(huì)使用別名。 在下面的示例代碼里，在編譯器中將鼠標(biāo)懸停在interfaced上，顯示它返回的是Interface，但懸停在aliased上時(shí)，顯示的卻是對(duì)象字面量類(lèi)型。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。