typescript 常见的内置泛型分析

·  阅读 21
typescript 常见的内置泛型分析

目录

一、Pick
二、Readonly
三、Exclude
四、Omit

中文 English

一、Pick

1.1

`作用`: `从类型T中选择出属性K`,来构造一个新的类型。

`传参`:
T: 类型(泛型)
K: 联合类型

`返回`RES: 含有K属性的类型(泛型)

`实现原理`type Exclude<T, K> = T extends U ? never : T

`示例`interface Todo {
    title: string
    description: string
    completed: boolean
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>
/*
type TodoPreview = {
  title: string;
  completed: boolean;
}
*/
复制代码

二、Readonly

1.1

`作用`: `接收一个泛型参数`,并`返回一个完全一样的类型`,只是`所有属性都会被readonly所修饰`。(浅层的只读)

`传参`:
T: 类型(泛型)

`返回`:
RES: 只读的类型(泛型)

`实现原理`:
type Readonly<T> = {
    readonly [k in keyof T]: T[k]
}

`示例`:
interface Todo {
    title: string
    description: string
    completed: boolean
    meta: {
        author: string
    }
}

type TodoPreview = Readonly<Todo>

/*
type dpt = {
    readonly title: string;
    readonly description: string;
    readonly completed: boolean;
    readonly meta: {
        author: string;
    };
}
*/

复制代码

三、Exclude

1.1

`作用`: `从联合类型T中排除U的类型成员`,来构造一个新的类型。

`传参`:
T: 联合类型
U: 单个类型

`返回`RES: 去除U的联合类型

`实现原理`type Exclude<T, U> = T extends U ? never : T

`示例`type res = Exclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'
复制代码

四、Omit

1.1

`作用`: 会创建一个省略K中字段的T对象类型

`传参`:
T: 类型(泛型)
K: 联合类型

`返回`RES: 去除K属性的类型(泛型)

`实现原理`type Omit<T, K> = {
   [k in Exclude<keyof T, K>]: T[k]
}

`示例`type Omit<T, K> = {
  [k in Exclude<keyof T, K>]: T[k]  
}

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = Omit<Todo, 'description' | 'title'>
/*
type TodoPreview = {
    completed: boolean;
}
*/
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改