Typescript 進階

1、前言

這是一篇本身總結的 Typescript type相關的進階文章，適合有必定ts基礎，並在type編寫方面感到迷惑、感到絕望的同窗，也給那些入門Typescript已久，卻沒法更上一層樓的童鞋一個方向。若是是Typescript小白，建議先看看基礎知識，大神請忽略。不知道你有沒有過這樣一種錯覺，Typescript使用也不算少了，各類interface各類type也寫得駕輕就熟。但他看起來重複又累贅，一點也不像別人家的type那麼眉清目秀。年輕人，是時候進階一波了，加油！相信你認真看完這篇文章，必定可以原地拔高3米！拔不高的當我沒說~

另外，文章不足之處，還請各位大佬指正。

2、進階姿式---從內置工具類型提及

Typescript內置工具type

• Partial<T>，屬性可選，使用頻率：通常；

  看起來十分簡單，經過keyof拿到泛型T的所有properties，再給每一個property加上可選標記?便可。

  type Partial<T> = {
      [P in keyof T]?: T[P];
  };

  舉個例子：咱們的用戶信息包含name和address屬性，可是有些用戶很特殊，他們這兩個屬性無關緊要。

  type User={
      name:string;
      address:string;
  };
  type OptionalUser=Partial<User>

• Required<T>屬性爲required，使用頻率：通常；

  type Required<T> = {
      [P in keyof T]-?: T[P];
  };

  仍是上面的例子，如今咱們倒過來，讓optional的屬性變成required：

  type OptionalUser=Partial<User>;
  type RequiredUser=Required<User>;

  其實和User是同樣的，默認就是required。

• Readonly<T>屬性只讀，使用頻率：通常；

  確保屬性是隻讀的，不能夠被修改，經常使用於react組件的props和state。

  type Readonly<T> = {
      readonly [P in keyof T]: T[P];
  };

• Pick<T K extends keyof T> 選取部分屬性生成新type，使用頻率：較多；這個helper用的就比較多了。

type Pick<T, K extends keyof T> = {
    [P in K]: T[P]
    };

仍是以前的User，咱們如今多了一種用戶，他只有name屬性。這時候咱們又不想從新寫一個差很少的type，怎麼辦呢？

type NameOnlyUser=Pick<User,'name'>;// type NameOnlyUser = {name: string;}

• Record<K extends keyof any, T>使用頻率：通常；

  看起來就是建立一個具備同類型屬性值的對象。沒實際遇到使用的狀況。

  type Record<K extends keyof any, T> = {[P in    K]: T;};

• Exclude<T,U>使用頻率：較多；

  從類型T中剔除全部能夠賦值給U的屬性，而後構造一個類型。
  主要用在聯合類型的exclude中

  type Exclude<T, U> = T extends U ? never : T;

• Extract<T,U>使用頻率：通常；

  基本同上，功能相反

  type Extract<T, U> = T extends U ? T : never;

• Omit<T, K extends keyof any>使用頻率：較多；

  type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

  主要用於剔除interface中的部分屬性。仍是以前的User，如今咱們想剔除name屬性，固然可使用前述的方式

  type UserWithoutName=Pick<User,'address'>;// type NameOnlyUser = {address: string;}

  這樣就很麻煩，特別是屬性比較多的時候，更簡便的就是直接用Omit：

  type UserWithoutName=Omit<User,'name'>;// type NameOnlyUser = {address: string;}

• NonNullable<T>使用頻率：通常；

  type NonNullable<T> = T extends null | undefined ? never : T;

  主要用於過濾掉null和undefined兩個基本類型的數據。

• Parameters<T extends (...args: any) => any>使用頻率：通常；

  寫到這裏剛好就進入了type中比較有趣的地方了，爲何？由於以前的type都沒有用到infer這個關鍵字，而以後的幾個type全用到了，純屬巧合，不過infer確實是type進階最重要的知識點之一。這個type獲取了泛型T的函數參數：

  type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

  具體來講，咱們能夠經過react-router裏面經常使用的withRouter函數舉例，看看咱們的Parameters返回結果(原理放在下一節):

  export function withRouter<P extends RouteComponentProps<any>>(component: React.ComponentType<P>): React.ComponentClass<Omit<P, keyof RouteComponentProps<any>>>;// 這是withRouter的函數簽名，如今咱們來拿他試試
  type WithRouterParameters=Parameters<typeof withRouter>//type WithRouterParameters = [React.ComponentType<RouteComponentProps<any, StaticContext, any>>]

  這樣，咱們就順利拿到了咱們的參數type。

• ConstructorParameters<T>獲取構造函數參數類型，使用頻率：通常；

  type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;

  這個看起來和上面的幾乎同樣，其實也差很少，原理是如出一轍的。
  咱們仍是用例子來講話，咱們定義一個User的class，經過這個type來獲取class的constructor parameters

  class User {
      static name: string
      static address: string
      static age: number
      constructor(name: string, address: string, age: number) {
          this.name = name;
          this.address = address;
          this.age = age
      }
      public sayHello() {
          alert('hello from' + this.name)
      }
  };
  type ConstructorParametersOfUser=ConstructorParameters<typeof User>//type ConstructorParametersOfUser = [string, string, number]

  輕鬆就拿到了實際的參數tuple：[string, string, number]

• ReturnType<T>獲取函數返回值類型，使用頻率：通常；

  type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

• InstanceType<T>獲取實例類型，使用頻率：通常；

  type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

3、extends and infer

爲何要單獨說說這兩個關鍵字，仔細看過文章上面部分的同窗會發現，幾乎全部使用infer的地方，都有extends的身影。上面部分看完且理解的同窗幾乎不用繼續看了，上面沒看完，心態有點爆炸，腦子有點懵的同窗，真是難爲大家了，如今來說 重點：

3.1 extends(有條件類型)

TypeScript 2.8 introduces conditional types which add the ability to express non-uniform type mappings. A conditional type selects one of two possible types based on a condition expressed as a type relationship test:

T extends U ? X : Y

大體意思就是：TypeScript 2.8引入了有條件類型，它可以表示非統一的類型。 有條件的類型會以一個條件表達式進行類型關係檢測，從而在兩種類型中選擇其一。再簡化一點，若T可以賦值給U，那麼類型是X，不然爲Y。
這個好理解，咱們常常export class CustomComponent extends React.Component<any, any> { }就是CustomComponent可賦值給React.Component（type）。

3.2 infer（類型推斷）

Within the extends clause of a conditional type, it is now possible to have infer declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple infer locations for the same type variable.

文檔意思是說，如今在有條件類型的extends子語句中，容許出現infer聲明，它會引入一個待推斷的類型變量。 這個推斷的類型變量能夠在有條件類型的true分支中被引用。 容許出現多個同類型變量的infer。
還記得上面的Parameters、ConstructorParameters、ReturnType、InstanceType嗎？他們正是利用了類型推斷，獲取各類待推斷的類型變量。只要記住並理解了如下幾點，你就已經徹底掌握了infer：

• 只能出如今有條件類型的extends子語句中；
• 出現infer聲明，會引入一個待推斷的類型變量；
• 推斷的類型變量能夠在有條件類型的true分支中被引用；
• 容許出現多個同類型變量的infer。

爲了便於理解，咱們先看這個小栗子：

type GetTypeSimple<T>=T extends infer R ? R : never;

emmmm?這是什麼操做？
這個GetTypeSimple接收一個T做爲參數來判斷他的推斷類型，顯然，種瓜得瓜種豆得豆，傳什麼類型就是什麼類型。

type Test1 = GetTypeSimple<number>;//number
type Test2 = GetTypeSimple<string>;//string
type Test3 = GetTypeSimple<Array<number>>;//number[]
type Test4 = GetTypeSimple<typeof withRouter>;//<P extends RouteComponentProps<any, StaticContext, any>>(component: React.ComponentType<P>) => React.ComponentClass<Omit<P, "history" | "location" | "match" | "staticContext">, any>

不知各位看官有點感受沒有？
繼續，來個稍微複雜點的栗子：
咱們假設定義一個以下的類型，要求將他的實例屬性type不爲never的單獨拿出來做爲一個聯合類型，使用infer來完成。

class User {
public name: string
public address: string
public age: number;
public never:never;
constructor(name: string, address: string, age: number) {
    this.name = name;
    this.address = address;
    this.age = age
}
public sayHello() {
    alert('hello from' + this.name)
}
}

指望的結果是返回：string | number | (() => void)
看到這麼個class，記性好的同窗應該想到了上面的InstanceType，沒錯，這裏咱們藉助它來推導返回的實例type;

type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;
type TypeOfUser=InstanceType<typeof User>//User

而後對拿到的InstanceType進行屬性類型的推導，最後過濾掉類型爲never的屬性便可

type TypeOfUserWithoutNever={
    [K in keyof TypeOfUser] : TypeOfUser[K] extends infer S ? S : never
}[keyof TypeOfUser]//`string | number | (() => void)`

最後，咱們把這兩步合到一塊兒：

type GetUnionPropertiesWithoutNeverOfT<T extends new (args: any) => any> = T extends new (...args: infer R) => infer U
?
{
    [K in keyof U]: U[K] extends infer S ? S : never
}[keyof U]
: never;
type TypeOfUserWithoutNever=GetUnionPropertiesWithoutNeverOfT<typeof User>//`string | number | (() => void)`

看到這裏的，基本上都能搞明白了，其實上面的GetUnionPropertiesWithoutNeverOfT我故意多寫了一個推斷類型R,驗證了容許出現多個同類型變量的infer。其實徹底沒用，去掉便可。
那麼，是時候來檢驗一波大家到底有沒有掌握上面的知識了。

下面咱們掌聲有請2018年12月份的一道來自LeetCode-OpenSource的筆試題：
假設有一個叫 EffectModule 的類

class EffectModule {}

這個對象上的方法只可能有兩種類型簽名:

interface Action<T> {
    payload?: T
    type: string
}
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>
syncMethod<T, U>(action: Action<T>): Action<U>

這個對象上還可能有一些任意的非函數屬性：

interface Action<T> {
    payload?: T;
    type: string;
}

class EffectModule {
    count = 1;
    message = "hello!";

    delay(input: Promise<number>) {
        return input.then(i => ({
        payload: `hello ${i}!`,
        type: 'delay'
        });
    }

    setMessage(action: Action<Date>) {
        return {
        payload: action.payload!.getMilliseconds(),
        type: "set-message"
        };
    }
}

如今有一個叫 connect 的函數，它接受 EffectModule 實例，將它變成另外一個一個對象，這個對象上只有EffectModule 的同名方法，可是方法的類型簽名被改變了:

asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>> // 變成了
asyncMethod<T, U>(input: T): Action<U>

syncMethod<T, U>(action: Action<T>): Action<U>  //變成了
syncMethod<T, U>(action: T): Action<U>

connect 以後

const effectModule = new EffectModule();
const connected: Connected = connect(effectModule);
type Connected = {
    delay(input: number): Action<string>
    setMessage(action: Date): Action<number>
};// 指望結果

此處建議本身先試試解題，再來看個人思路和你的一不同。

第一步，觀察結果，發現除了函數屬性，普通的屬性都沒了，看來咱們要先過濾掉非函數屬性

const effectModule = new EffectModule();
const connected: Connected = connect(effectModule);
type PickFunctionProperties<T>={
    [K in keyof T]:T[K] extends Function ? K:never        
}[keyof T];
type FunctionProperties=PickFunctionProperties<EffectModule>//"delay" | "setMessage"

而後經過Pick產出咱們須要的只包含函數屬性的類型

type FunctionsLeftT<T>=Pick<T,PickFunctionProperties<T>>;
type FunctionLeftT1=FunctionLeftT<EffectModule>
<!-- type FunctionLeftT1 = {
        delay: (input: Promise<number>) => Promise<{
            payload: string;
            type: string;
        }>;
        setMessage: (action: Action<Date>) => {
            payload: number;
            type: string;
        };
    } -->

緊接着，用咱們今天所學，進行最關鍵的類型推導轉換：
觀察題目能夠發現，兩個函數簽名參數和返回值都不太同樣，因此咱們須要先判斷當前處理的函數是哪一種類型，而後運用對應類型的轉換規則就能夠了，這裏我寫詳細一些，方便你們真的搞懂這個點，
咱們先來轉換delay這個函數：

type TransformDelay<T extends (args: any) => any> = T extends (input: Promise<infer S>) => Promise<Action<infer U>> ? (input: S) => Action<U> : never

同理，咱們再來轉換setMessage這個函數：

type TransformSetMessage<T extends (args: any) => any> = T extends (action: Action<infer V>) => Action<infer U> ? (action: V) => Action<U> : never

而後，這兩種類型的函數其實再來一個條件類型判斷就徹底能夠寫到一塊兒，不信你看

Method extends delay ? TransformDelay : TransformSetMessage

因而咱們能夠寫一個更加通用的type，假設咱們命名爲ConnectMethod

type ConnectMethod<T extends (args: any) => any> =
    T extends (input: Promise<infer S>) => Promise<Action<infer U>>
    ? (input: S) => Action<U>
    : T extends (action: Action<infer V>) => Action<infer U>
    ? (action: V) => Action<U>
    : never;

最後處理掉FunctionLeftT1的函數屬性就能夠啦！

type ConnectAllMethod<T> = {
    [K in keyof T]: ConnectMethod<T[K]>
}

因此最後，咱們的Connect完成了，恭喜你經過面試（哈哈，別想太多）。

type Connect<T> = ConnectAllMethod<FunctionLeftT<T>>

最後按照題目意思，咱們的Connect應該長這樣：

type Connect = (module: EffectModule) => ConnectAllMethod<FunctionLeftT<EffectModule>>;
//具體使用

const connect:Connect// 省略函數具體實現。。。
//
const connected: Connected = connect(effectModule);

完事兒，吃根辣條冷靜會兒。

4、總結

到這兒基本上想說的都說完了，我的認爲Typescript的類型掌握到這個程度，已經能夠hold住大部分場景了，技多不壓身，也許你如今不會用到條件類型判斷不會用到類型推斷，可是多掌握一點兒確定是好事，萬一就須要用了呢，react官方的types裏面就有大約20處用到infer，extends天然是多不勝數了。