Typescript 中的 Partial, Readonly, Record, Pick

在 typescript （後面簡稱爲 ts）中定義 interface（後面簡稱爲「接口」） 時，經常須要對進行二次封裝或調整，而 ts 在2.1版本中加入了一些程序類型工具，供開發者方便的進行此類操做。

備註：這些程序類型僅限制用於 type 類型聲明中。

能夠先看看它們的源碼定義：

/** * Make all properties in T optional */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

/** * Make all properties in T readonly */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

/** * From T, pick a set of properties whose keys are in the union K */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

/** * Construct a type with a set of properties K of type T */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
複製代碼

這些程序類型早在2016年就發佈了，所以已經被不少框架或插件所使用。那麼來依次說明：

Record

以 typeof 格式快速建立一個類型，此類型包含一組指定的屬性且都是必填。

type Coord = Record<'x' | 'y', number>;

// 等同於
type Coord = {
	x: number;
	y: number;
}
複製代碼

具體的複雜業務場景中，通常會接口 Pick 、Partial 等組合使用，從而過濾和重組出新的類型定義。

Partial

將類型定義的全部屬性都修改成可選。

type Coord = Partial<Record<'x' | 'y', number>>;

// 等同於
type Coord = {
	x?: number;
	y?: number;
}
複製代碼

Readonly

無論是從字面意思，仍是定義上都很好理解：將全部屬性定義爲自讀。

type Coord = Readonly<Record<'x' | 'y', number>>;

// 等同於
type Coord = {
    readonly x: number;
    readonly x: number;
}

// 若是進行了修改，則會報錯：
const c: Coord = { x: 1, y: 1 };
c.x = 2; // Error: Cannot assign to 'x' because it is a read-only property.
複製代碼

Pick

從類型定義的屬性中，選取指定一組屬性，返回一個新的類型定義。

type Coord = Record<'x' | 'y', number>;
type CoordX = Pick<Coord, 'x'>;

// 等用於
type CoordX = {
	x: number;
}
複製代碼

官方預置的高級類型還有不少其餘的，已經補上了：TypeScript 的全部 高級類型。