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

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

創(chuàng)新互聯(lián)專注于縉云企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)?？N云網(wǎng)站建設(shè)公司,為縉云等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

注釋的妙用

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

巧用類型推導(dǎo)

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

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

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

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

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

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

type AddFn = typeof add

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

type returnType = ReturnType<typeof add> // number

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

巧用元組

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

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

巧用Omit

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

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

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

運用Record

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

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

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

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

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

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

比如：

• 我們忘記寫了一個汽車品牌，他會報錯嗎？
• 我們拼寫屬性名錯誤了，它會報錯嗎？
• 我們添加了一個非上述三個品牌的品牌進去，他會報錯嗎？
• 我們更改了其中一個品牌的名字，他會有報錯提醒嗎？

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

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

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

當我們拼寫錯誤:

當我們少些一個品牌:

當我們添加了一個非約定好的品牌進去:

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

巧用類型約束

在 .jsx 文件里，泛型可能會被當做 jsx 標簽

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

加 extends 可破

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

交叉類型

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

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

聯(lián)合類型

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

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

類型別名

類型別名會給一個類型起個新名字，類型別名有時和接口很像，但是可以作用于原始值，聯(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 方式可以實現(xiàn)接口的 extends 和 implemenjs
• interface 可以實現(xiàn)接口合并聲明

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：淺談Vue3.0之前你必須知道的TypeScript實戰(zhàn)技巧
文章鏈接：http://muchs.cn/article2/johoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、微信小程序、搜索引擎優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)