typescript進階篇之高級類型與條件類型(Readonly, Partial, Pick, Record)

本文所有東西儘可在 typescript 官網文檔尋找,但是深淺不一

高級類型

lib 庫中的五個高級類型
以下所有例子皆以 person 爲例

interface Person {
    name: string;
    age?: number;
}

Partial

源碼:

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

實例:

type person2 = Partial<Person>;
// person2 === {name?: string; age?: number}

Required

源碼:

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

實例:

type person3 = Required<Person>;
// person3 === {name: string; age: number}

Readonly

源碼:

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

實例:

type person4 = Readonly<Person>;
// person4 === {
//        readonly name: string;
//        readonly age?: number;
//  }

Pick

源碼:

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

實例:

type person5 = Pick<Person, "name">;
// person5 === {name: string}

Record

源碼:

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

實例:

type person6 = Record<'name' | 'age', string>
// person6 === {name: string; age: string}

條件類型

關於條件類型,官網上說的很詳細了,我就直接拿過來

type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "b" | "d"
type T01 = Extract<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "a" | "c"

type T02 = Exclude<string | number | (() => void), Function>;  // string | number
type T03 = Extract<string | number | (() => void), Function>;  // () => void

type T04 = NonNullable<string | number | undefined>;  // string | number
type T05 = NonNullable<(() => string) | string[] | null | undefined>;  // (() => string) | string[]

function f1(s: string) {
    return { a: 1, b: s };
}

class C {
    x = 0;
    y = 0;
}

type T10 = ReturnType<() => string>;  // string
type T11 = ReturnType<(s: string) => void>;  // void
type T12 = ReturnType<(<T>() => T)>;  // {}
type T13 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T14 = ReturnType<typeof f1>;  // { a: number, b: string }
type T15 = ReturnType<any>;  // any
type T16 = ReturnType<never>;  // any
type T17 = ReturnType<string>;  // Error
type T18 = ReturnType<Function>;  // Error

type T20 = InstanceType<typeof C>;  // C
type T21 = InstanceType<any>;  // any
type T22 = InstanceType<never>;  // any
type T23 = InstanceType<string>;  // Error
type T24 = InstanceType<Function>;  // Error

高級類型與條件類型就這些,如果能夠掌握他們,你就能在 ts 的海洋中任意遨遊了