很多人對TypeScript的使用還停留在基本操作上,其實 TypeScript 的特性非常強大,我們利用好這些特性可以有效地提高代碼質量、加速開發效率，今天就介紹 9 個非常實用的 TypeScript 技巧或者特性.
註釋的妙用
我們可以通過/** */來註釋TypeScript的類型，當我們在使用相關類型的時候就會有註釋的提示，這個技巧在多人協作開發的時候十分有用，我們絕大部分情況下不用去花時間翻文檔或者跳頁去看註釋。
巧用類型推導
TypeScript 能根據一些簡單的規則推斷（檢查）變量的類型。
比如一個簡單的add函數
function add(a: number, b: number) {
return a + b
}
TypeScript就可以通過參數與return的運算符推導出函數的返回值
如果想獲取函數整體的類型那麼可以藉助typeof
注意與JavaScript中的typeof區分開
type AddFn = typeof add
當然上述情況算是比較簡單的情況，有時候我們的返回值類型其實比較複雜，這個時候藉助類型推導和ReturnType就可以很輕鬆地獲取返回值類型。
type returnType = ReturnType<typeof add> // number
上述技巧在對redux進行編碼的時候非常適用，這樣可以省略我們大量的重複代碼，畢竟redux的編碼工作是非常繁瑣的。
巧用元組
有時候我們可能需要批量的來獲取參數，並且每一個參數的類型還不一樣，我們可以聲明一個元組如：
function query(...args:[string, number, boolean]){
const d: string = args[0];
const n: number = args[1];
const b: boolean = args[2];
}
巧用Omit
有時候我們需要複用一個類型，但是又不需要此類型內的全部屬性，因此需要剔除某些屬性，這個時候Omit就派上用場了。
interface User {
username: string
id: number
token: string
avatar: string
role: string
}
type UserWithoutToken = Omit<User, 'token'>
這個方法在React中經常用到，當父組件通過props向下傳遞數據的時候，通常需要複用父組件的props類型，但是又需要剔除一些無用的類型。
運用Record
Record是TypeScript的一個高級類型，但是相關的文檔並不多，所以經常被人忽略，但是是一個非常強大的高級類型。
Record允許從Union類型中創建新類型，Union類型中的值用作新類型的屬性。
舉個簡單的例子，比如我們要實現一個簡單的汽車品牌年齡表，一下寫法貌似沒有問題。
type Car = 'Audi' | 'BMW' | 'MercedesBenz'
const cars = {
Audi: { age: 119 },
BMW: { age: 113 },
MercedesBenz: { age: 133 },
}
雖然這個寫法沒問題，但是有沒有考慮過類型安全的問題？
比如：
我們忘記寫了一個汽車品牌，他會報錯嗎？
我們拼寫屬性名錯誤了，它會報錯嗎？
我們添加了一個非上述三個品牌的品牌進去，他會報錯嗎？
我們更改了其中一個品牌的名字，他會有報錯提醒嗎？
上述這種寫法統統不會，這就需要Record的幫助。
type Car = 'Audi' | 'BMW' | 'MercedesBenz'
type CarList = Record<Car, {age: number}>
const cars: CarList = {
Audi: { age: 119 },
BMW: { age: 113 },
MercedesBenz: { age: 133 },
}
當我們拼寫錯誤:
當我們少些一個品牌:
當我們添加了一個非約定好的品牌進去:
在實戰項目中儘量多用Record，它會幫助你規避很多錯誤，在vue或者react中有很多場景選擇Record是更優解。
巧用類型約束
在 .jsx 文件裏，泛型可能會被當做 jsx 標籤
const toArray = <T>(element: T) => [element]; // Error in .jsx file.
加 extends 可破
const toArray = <T extends {}>(element: T) => [element]; // No errors.
交叉類型
交叉類型是將多個類型合併爲一個類型。這讓我們可以把現有的多種類型疊加到一起成爲一種類型，它包含了所需的所有類型的特性。
在 JavaScript 中，混入是一種非常常見的模式，在這種模式中，你可以從兩個對象中創建一個新對象，新對象會擁有着兩個對象所有的功能。交叉類型可以讓你安全的使用此種模式：
聯合類型
在 JavaScript 中，你希望屬性爲多種類型之一，如字符串或者數組。這就是聯合類型所能派上用場的地方（它使用 | 作爲標記，如 string | number）。
function formatCommandline(command: string[] | string) {
let line = '';
if (typeof command === 'string') {
line = command.trim();
} else {
line = command.join(' ').trim();
}
}
類型別名
類型別名會給一個類型起個新名字，類型別名有時和接口很像，但是可以作用於原始值，聯合類型，元組以及其它任何你需要手寫的類型。
類型別名可以是泛型
type Container<T> = { value: T };
也可以使用類型別名來在屬性裏引用自己：
type Tree<T> = {
value: T;
left: Tree<T>;
right: Tree<T>;
}
類型別名看起來跟interface非常像，那麼應該如何區分兩者？
interface只能用於定義對象類型，而type的聲明方式除了對象之外還可以定義交叉、聯合、原始類型等，類型聲明的方式適用範圍顯然更加廣泛。
但是interface也有其特定的用處：
interface 方式可以實現接口的 extends 和 implemenjs
interface 可以實現接口合併聲明
type Alias = { num: number }
interface Interface {
num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;
此外，接口創建了一個新的名字，可以在其它任何地方使用。類型別名並不創建新名字—比如，錯誤信息就不會使用別名。在下面的示例代碼裏，在編譯器中將鼠標懸停在interfaced上，顯示它返回的是Interface，但懸停在aliased上時，顯示的卻是對象字面量類型。
◆ ◆ ◆ ◆ ◆
長按關注小生
你的在看我當成喜歡