TypeScript高级类型

发表于 | 分类于 |
字数统计 1.2k | 阅读时长 5

TypeScript 高级类型

说在前面：笔者 TS 一塌糊涂，真的，就看同事代码很多看不懂，这一篇文章整理了 TS 常见的高级类型，比如说Omit、Partial等。

因为笔者 TS 能力是在有限，所以这边文章基本是 copy 网上的文章，只是为了增强自己的记忆点。原文链接跟参考链接放在下面：

Record<K extends keyof any, T>

  • 定义
1
2
3
type Record<K extends keyof any, T> = {
  [P in K]: T;
};
  • 作用：以 typeof 格式快速创建一个类型，此类型包含一组指定的属性，且都是必填。
  • 例子：
1
2
3
4
5
6
7
type Coord = Record<'x'|'y'|, number>;

// 等同于：
type Coord = {
    x?: number;
    y?: number;
}

Partial

  • 定义
1
2
3
type Partial<T> = {
  [P in keyof T]?: T[P];
};
  • 作用：将类型定义的所有属性都修改为可选
  • 例子
1
2
3
4
5
6
7
8
9
10
11
12
interface RecordInterface {
  dataIndex: string;
  title: string;
}

type Coord = Partial<RecordInterface>;

// 等同于：
type Coord = {
  dataIndex?: string;
  title?: string;
};
1
2
3
4
5
6
7
type Coord = Partial<Record<"x" | "y", number>>;

//  等同于：
type Coord = {
  x?: number;
  y?: number;
};

Required

  • 定义
1
2
3
type Required<T>{
    [P in keyof T]-?: T[P]
}
  • 作用：与Partial作用相反，把所有属性改为必填属性。

Readonly

  • 定义
1
2
3
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
  • 作用：将所有属性定义为只读
  • 例子：
1
2
3
4
5
6
7
type Coord = Readonly<Record<"x" | "y", number>>;

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

Pick<T, k extends keyof T>

  • 定义
1
2
3
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};
  • 作用：从以给定的类型定义的属性中，选取指定的一组属性，返回一个新的类型
  • 例子
1
2
3
4
5
6
type Coord = Pick<Record<"x" | "y", number>, "x">;

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

Exclude<T, U>

  • 定义
1
type Exclude<T, U> = T extends U ? never : T;
  • 作用：剔除 T 中的某个 U 类型。
  • 例子：
1
2
3
type T0 = Exclude<"a" | "b" | "c", "b">; // 'a' | 'c';

type T1 = Exclude<number | string | boolean, boolean>; // number | string;

Extract<T, U>

  • 定义
1
type Extract<T, U> = T extends U ? T : never;
  • 作用：从 T 中提取某个属性 U, 与 Exclude 恰好相反。

Omit<T, k extends keyof any>

  • 定义
1
2
3
4
5
6
// 得到T中保留的属性的名字。
type RemainT<T, K extends keyof any> = Exclude<keyof T, K>;
type Omit<T, k extends keyof any> = Pick<T, RemainT>;

// 即
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
  • 作用：拆除接口中指定的属性
  • 例子
1
2
3
4
5
6
7
8
interface InterDemo {
    a: number,
    b?: boolean,
    c: string
}

interface OmitDemo1 = Omit<InterDemo, 'c'>;  // {a: number, b?: boolean};
interface OmitDemo2 = Omit<InterDemo, 'a' | 'b'>;    // {c: string};

NonNullable

  • 定义
1
type NonNullable<T> = Exclude<T, null | undefined>;
  • 作用：过滤掉联合类型中的null和undefined
  • 例子
1
type T1 = NonNullable<number | null>; // numberl

Parameters<T extends (…args: any) => any>

  • 定义：
1
2
3
4
5
type Parameters<T extends (...args: any) => any> = T extends (
  ...args: infer P
) => any
  ? P
  : never;
  • 作用：获取函数的全部参数类型，以元组类型返回
  • 例子：
1
2
3
type F1 = (a: string, b: number)=>void;

type F1Params = Parameters(F1);     // [string, number]

ConstructorParameters<T extends new (…args: any)=>any>

  • 定义
1
type ConstructorParameters<T extends new (...args: any) => any = T extends new (...args: infer P) => any ? P :never;
  • 作用：获取构造函数的全部参数
  • 例子
1
2
3
4
5
6
7
8
9
10
11
12
13
interface IEntity {
  count?: () => number;
}

interface IEntityConstructor {
  new (a: boolean, b: string): IEntity;
}

class Entity implements IEntity {
  constructor(a: boolan, b: string) {}
}

type EntityConstructorParamType = ConstructorParamters<IEntityConstructor>; // [boolean, string];

ReturnType<T extends (…args: any)=>any>

  • 定义
1
2
3
4
5
type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : never;
  • 作用：接受函数声明，返回函数的返回值类型，如果多个类型则以联合类型返回
  • 例子
1
2
3
type F1 = () => Date;

type F1ReturnType = ReturnType(F1); // Date;

InstanceType<T extends new (…args: any)=>any>

  • 定义
1
2
3
4
5
type InstanceType<T extends new (...args: any) => any> = T extends new (
  ...args: any
) => infer R
  ? R
  : never;
  • 作用：获取 构造函数 的返回类型，如果是多个就以 联合类型 的方式返回，我们借用上面的定义：
  • 例子
1
2
3
4
5
6
7
8
9
10
11
12
13
interface IEntity {
  count?: () => number;
}

interface IEntityConstructor {
  new (a: boolean, b: string): IEntity;
}

class Entity implements IEntity {
  constructor(a: boolan, b: string) {}
}

type EntityType = InstanceType<IEntityConstructor>; // IEntity

ThisParameterType

  • 定义
1
type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;
  • 作用：获取函数中this的数据类型，如果没有返回unknown类型
  • 例子
1
2
3
4
5
6
7
interface Foo {
    x: number
};

function fn(this: Foo) {}

type Test = ThisParameterType<typeof fn>; // Foo

OmitThisParameter

  • 定义
1
2
3
type OmitThisParameter<T> = unknown extends ThisParameterType<T> ?
    T :
    T extends (...args: infer A) => infer R ? (...args: A) => R : T;

  • 作用：移除函数中的 this 数据类型：

  • 例子

1
2
3
4
5
6
7
interface Foo {
  x: number;
}

type Fn = (this: Foo) => void;

type NonReturnFn = OmitThisParameter<Fn>; // () => void
-------------本文结束感谢您的阅读-------------