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

注釋的妙用

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

巧用類型推導(dǎo)

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

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

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

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

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

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

type AddFn = typeof add

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

type returnType = ReturnType<typeof add> // number

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

巧用元組

有時(shí)候我們可能需要批量的來獲取參數(shù)，并且每一個(gè)參數(shù)的類型還不一樣，我們可以聲明一個(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è)類型，但是又不需要此類型內(nèi)的全部屬性，因此需要剔除某些屬性，這個(gè)時(shí)候 Omit 就派上用場了。

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

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

運(yùn)用Record

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

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

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

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

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

雖然這個(gè)寫法沒問題，但是有沒有考慮過類型安全的問題？

比如：

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

上述這種寫法統(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)我們拼寫錯(cuò)誤:

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

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

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

巧用類型約束

在 .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.

交叉類型

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

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

聯(lián)合類型

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

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

類型別名

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

類型別名可以是泛型

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

也可以使用類型別名來在屬性里引用自己：

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論