本文首發於微信公眾號「程式設計師面試官」
很多人對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上時，顯示的卻是物件字面量型別。
