Typescript 中的 Partial, Readonly, Record, Pick

时间 2020-02-23

标签 typescript partial readonly record pick 繁體版

原文原文链接

在 typescript （后面简称为 ts）中定义 interface（后面简称为“接口”）时，经常须要对进行二次封装或调整，而 ts 在2.1版本中加入了一些程序类型工具，供开发者方便的进行此类操做。html

备注：这些程序类型仅限制用于 type 类型声明中。git

能够先看看它们的源码定义：github

/** * 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年就发布了，所以已经被不少框架或插件所使用。那么来依次说明：typescript

Record

以 typeof 格式快速建立一个类型，此类型包含一组指定的属性且都是必填。框架

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

// 等同于
type Coord = {
	x: number;
	y: number;
}
复制代码

具体的复杂业务场景中，通常会接口 Pick 、Partial 等组合使用，从而过滤和重组出新的类型定义。工具

Partial

将类型定义的全部属性都修改成可选。post

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

// 等同于
type Coord = {
	x?: number;
	y?: number;
}
复制代码

Readonly

无论是从字面意思，仍是定义上都很好理解：将全部属性定义为自读。ui

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

从类型定义的属性中，选取指定一组属性，返回一个新的类型定义。es5

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

// 等用于
type CoordX = {
	x: number;
}
复制代码

官方预置的高级类型还有不少其余的，已经补上了：TypeScript 的全部高级类型。spa