TypeScript中的内置工具类型及其实现

TypeScript

 2020/12/09 

先来看下基础实现 clone，把 T 里面的都拷贝一次：

1
2
3

type cloneT<T> = {
  [K in keyof T]: T[K];
};

Partial

用法

将类型定义的所有属性都修改为可选

type Foo = {
  name: string;
  age: number;
}
type Coord = Partial<Foo>
// 等同于
type Coord = {
  name?: string;
  age?: number;
}

实现

1
2
3

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

类似Partial的实现，还有 Required，Readonly

Required 的作用是将传入的属性变为必选项, Readonly是将所有属性定义为自读，源码如下

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

类似 -?, readonly, 同理还有 -readonly

Record

用法

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

type Coord = 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;
}

一个很实用的实现就是 clone，把 T 里面的都拷贝一次

1
2
3

type cloneT<T> = {
  [K in keyof T]: T[K];
};

重要的就是这个in操作符，你完全可以把它理解为就是for…in，也就包含了遍历的过程

Partial

clone再可选

1
2
3

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

参考文献

原文作者：Jacleklm

原文链接：http://jacleklm.github.io/2020/12/09/TypeScript%E4%B8%AD%E7%9A%84%E5%86%85%E7%BD%AE%E5%B7%A5%E5%85%B7%E7%B1%BB%E5%9E%8B%E5%8F%8A%E5%85%B6%E5%AE%9E%E7%8E%B0/

发表日期：December 9th 2020, 5:25:21 pm

更新日期：September 17th 2023, 10:00:22 pm

Next Post

解决hexo g生成index.html为空的问题
Previous Post

TypeScript中的类型编程

CATALOG

1. Partial
1. 1.1. 用法
2. 1.2. 实现
2. 类似Partial的实现，还有 Required，Readonly
3. Record
1. 3.1. 用法
2. 3.2. 实现
4. Readonly
5. Pick
6. Partial