Vue3.0以前你必須知道的TypeScript實戰技巧

本文首發於微信公衆號「程序員面試官」

不少人對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上時，顯示的倒是對象字面量類型。

---