【TypeScript】泛型工具

跟着 小满zs 学 ts:学习TypeScript24(TS进阶用法-泛型工具)_ts泛型工具-CSDN博客

  • Partial 所有属性可选的意思
  • Required 所有属性必选的意思
  • Pick 提取部分属性
  • Exclude 排除部分属性
  • emit 排除部分属性并且返回新的类型

Partial

属性变为可选。

image.png

interface User {
    address?: string
    name: string
    age: number
}

type PartialUser = CustomPartial<User>
// 原理
type CustomPartial<T> = {
    // in 操作符后面只能跟联合类型
    [P in keyof T]?: T[P]
}

Required

属性全部变为必选。

interface User {
    address?: string
    name: string
    age: number
}

type RequiredUser = Required<User>
// 原理
type CustomRequired<T> = {
    // in 操作符后面只能跟联合类型
    [P in keyof T]-?: T[P]
}

注意这里是 -? ,而不是直接去掉喔~

Pick

提取属性类型。

image.png

interface User {
    address?: string
    name: string
    age: number
}

// 从 User 中选择出 name 和 age 属性
type PickUser = Pick<User, 'name' | 'age'>
// 原理
type CustomPick<T, K extends keyof T> = {
    // in 操作符后面只能跟联合类型
    [P in K]: T[P]
}

Exclude

排除某个 / 某些类型。

image.png

interface User {
    address?: string
    name: string
    age: number
}

// Exclude 排除的是联合类型 而不是 interface
type ExcludeUser = Exclude< 'name' | 'age' | 'address', 'name' | 'age'>
// 原理
// 这里使用 never 是因为 never 在联合类型中会被排除掉的
type CustomExclude<T, K> = T extends K ? never : T

这里有一个知识点需要注意。

以下来自:TS关键字extends用法总结 - 掘金 (juejin.cn)

对于使用extends关键字的条件类型(即上面的三元表达式类型),如果extends前面的参数是一个泛型类型,当传入该参数的是联合类型,则使用分配律计算最终的结果。分配律是指,将联合类型的联合项拆成单项,分别代入条件类型,然后将每个单项代入得到的结果再联合起来,得到最终的判断结果。

还是用上面的例子说明

  type P<T> = T extends 'x' ? string : number;
  type A3 = P<'x' | 'y'>  // A3的类型是 string | number

该例中,extends的前参为T,T是一个泛型参数。在A3的定义中,给T传入的是’x’和’y’的联合类型'x' | 'y',满足分配律,于是’x’和’y’被拆开,分别代入P<T>

P<'x' | 'y'> => P<'x'> | P<'y'>

'x’代入得到

'x' extends 'x' ? string : number => string

'y’代入得到

'y' extends 'x' ? string : number => number

然后将每一项代入得到的结果联合起来,得到string | number

总之,满足两个要点即可适用分配律:第一,参数是泛型类型,第二,代入参数的是联合类型

Omit

排除属性。

image.png

interface User {
    address?: string
    name: string
    age: number
}

// 排除属性
type OmitUser = Omit<User, 'age' | 'address'>
// 原理
type CustomOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
  • Exclude 是针对联合类型,用于排除一些特定成员类型;
  • Omit 是针对对象类型,用于忽略或排除某些特定属性;

Record

约束对象的 key 和 value。

type key = 'c'|'x'| 'k'
type value = '唱' | '跳' | 'rap' | '篮球'

let obj: Record<key, value> = {
    // key 不能缺 value 随意
    c: '唱',
    x: 'rap',
    k: 'rap'
}

并且支持嵌套,value 还可以是 Record<key, value>

image.png

// 原理
// 对象的 key 只能是 string | number | symbol
type ObjKey = keyof any
type CustomRecord<K extends ObjKey, V> = {
    [P in K]: V
}

returnType

获取函数的返回值的类型。

const fn = () => {
    return [1, 23, 34]
}
type arrNum = ReturnType<typeof fn>
// 原理
type CustomReturnType<T extends Function> = T extends (...args: any[]) => infer R ? R : any

相关推荐

  1. TypeScript

    2024-06-17 07:34:03       35 阅读
  2. Typescript

    2024-06-17 07:34:03       42 阅读
  3. typeScript9 (

    2024-06-17 07:34:03       42 阅读
  4. TypeScript:

    2024-06-17 07:34:03       41 阅读
  5. TypeScript 类型

    2024-06-17 07:34:03       33 阅读
  6. 理解typescript

    2024-06-17 07:34:03       34 阅读
  7. typescript-

    2024-06-17 07:34:03       32 阅读
  8. TypeScript(Generics)

    2024-06-17 07:34:03       21 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-17 07:34:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-17 07:34:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-17 07:34:03       82 阅读
  4. Python语言-面向对象

    2024-06-17 07:34:03       91 阅读

热门阅读

  1. [AIGC] 选择LeetCode刷题的编程语言

    2024-06-17 07:34:03       34 阅读
  2. 比特币通用API服务

    2024-06-17 07:34:03       27 阅读
  3. Flink Watermark详解

    2024-06-17 07:34:03       26 阅读
  4. 矩阵补全IGMC 学习笔记

    2024-06-17 07:34:03       23 阅读
  5. ComfyUI

    ComfyUI

    2024-06-17 07:34:03      24 阅读
  6. 外键的基本概念

    2024-06-17 07:34:03       25 阅读
  7. C++多态

    2024-06-17 07:34:03       27 阅读
  8. 面试计算机网络八股文十问十答第九期

    2024-06-17 07:34:03       32 阅读
  9. linux发行版CentOS、Debian和Ubuntu的对比

    2024-06-17 07:34:03       26 阅读
  10. 按键精灵的自动q语言连接mysql

    2024-06-17 07:34:03       21 阅读
  11. LeetCode --- 2073. Time Needed to Buy Tickets 解题报告

    2024-06-17 07:34:03       25 阅读
  12. ES6-04-模块化的暴露:export关键字

    2024-06-17 07:34:03       33 阅读
  13. ActiViz中不规则网络数据体绘制技术介绍

    2024-06-17 07:34:03       28 阅读
  14. C# OpenCvSharp 图像处理函数-颜色通道-cvtColor

    2024-06-17 07:34:03       31 阅读