美文网首页
TS中Record、Pick等9个高级类型使用详解

TS中Record、Pick等9个高级类型使用详解

作者: 硅谷干货 | 来源:发表于2024-11-25 21:47 被阅读0次

keyof

获取类型内所有的 key，即所有属性名 , 获取的是一个 联合类型
这里类型指：通过 interface 或 type 定义的类型；通过 typeof xxx 返回的类型等。keyof 后面必须是类型，不能是具体的对象

  interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  
  type T = keyof IPeople

  // 等同于
  type T = "name" | "age" | "sex"

注意：keyof any

  type TAny = keyof any
  // 等同于
  type TAny = string | number | symbol //不包括 boolean object等

in

循环类型 一般循环的是 联合类型，把联合类型中每一个属性名赋值给 P

  // 使用上面的 IPeople 类型
  type TObj =  {
    [P in keyof IPeople]: any
  }

  // 等同于
  type TObj = {
    name: any;
    age: any;
    sex: any;
  }

typeof

ts 中 typeof 是获取数据的类型，常用用于获取 对象、数组、函数、class、枚举等类型

  const people = {
    name: 'liuyz',
    age: 18,
  }
  
  type INewPeople = typeof people
  // 等同于
  // type INewPeople = {
  //   name: number
  //   age: number
  // }
  
  const newPeople: INewPeople = {
    name: "zhi",
    age: 18,
  }
  
  type TKeys = keyof typeof newPeople
  // 等同于
  // type TKeys = "name" | "age"

具体细节看最下面

Record

将 K 中的所有属性值都转换为 T 类型，并返回新的对象类型

  <!-- 源码 -->
  type Record<K extends keyof any, T> = {
    [P in K]: T;
  };
  • keyof any: 等同于 string | number | symbol ，也就是说 K 只能是这三种类型
  • P in K: 指循环 K 类型
  type TKeys = 'A' | 'B' | 'C'

  interface IPeople {
    name:string,
    age?: number,
    sex: string
  }

  type TRecord = Record<TKeys, IPeople>
  
  // 等同于
  type TRecord = {
    B: IPeople;
    C: IPeople;
    A: IPeople;
  }

Pick

从 T 类型中选取部分 K 类型，并返回新的类型，这里 T 常用于对象类型

  <!-- 源码 -->
  type Pick<T, K extends keyof T> = {
      [P in K]: T[P];
  };
  • keyof T 获取 T 中所有的 key 属性
  • K extends keyof T K 必须继承于 keyof T ,如果 K 中的属性有不属于 keyof T 的则会报错
  interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  
  type TPick = Pick<IPeople, 'name' | 'age'>
  
  // 等同于
  type TPick = {
    name: string;
    age?: number | undefined;
  }

注意： 如果想生成的 TPick 包含自定义属性，则需要在 IPeople 中添加 [key: string]: any

  interface IPeople {
    name:string,
    age?: number,
    sex: string,
    [key: string]: any
  }

  type TPick = Pick<IPeople, 'name' | 'age' | 'color'>

  等同于
  type TPick = {
    name: string;
    age?: number | undefined;
    color: any;
  }

类似于

  const getValue = <T extends object, K extends keyof T>(obj:T, name:K):T[K] => {
    return obj[name]
  }

Partial

将T中的所有属性设置为可选

  <!-- 源码 -->
  type Partial<T> = {
      [P in keyof T]?: T[P];
  };
  • keyof T 获取 T 的所有属性
  • ?: 可选参数
  interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TPartial = Partial<IPeople>
  
  // 等同于
  type TPartial = {
    name?: string | undefined;
    age?: number | undefined;
    sex?: string | undefined;
  }

Required

使 T 中的所有属性都变成必需的

  <!-- 源码 -->
  type Required<T> = {
    [P in keyof T]-?: T[P];
  }
  • -?: 通过 -? 把所有属性变成 必需的
  interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TRequired = Required<IPeople>

  // 等同于
  type TRequired = {
    name: string;
    age: number;
    sex: string;
  }

Readonly

将 T 中的所有属性设为只读

  <!-- 源码 -->
  type Readonly<T> = {
    readonly [P in keyof T]: T[P];
  }
  • readonly: 只读属性
  interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TReadonly = Readonly<IPeople>

  // 等同于
  type TReadonly = {
     readonly name: string;
     readonly age?: number | undefined;
     readonly sex: string;
  }

Exclude

从T中剔除可以赋值给U的类型

  <!-- 源码 -->
  type Exclude<T, U> = T extends U ? never : T
  • 当 T 是联合类型时，则会循环 T 类型即： (T1 extends U ? never : T1) ｜ (T2 extends U ? never : T2) | …
  type TExclude1 = Exclude<"a" | "b", "a" | "c">
  // 等同于
  type TExclude1 = "b"

  type TExclude2 = Exclude<number | string | boolean, string>
  // 等同于
  type TExclude2 = number | boolean

Extract

提取T中可以赋值给U的类型

  <!-- 源码 -->
  type Extract<T, U> = T extends U ? T : never
  • 当 T 是联合类型时，则会循环 T 类型即： (T1 extends U ? T1 : never ) ｜ (T2 extends U ? T2 : never ) | …
  type TExtract1 = Extract<"a" | "b", "a" | "c">
  // 等同于
  type TExtract1 = "a"

  type TExtract2 = Extract<number | string | boolean, string>
  // 等同于
  type TExtract2 = string

  type TExtract3 = Extract<number | string | boolean, object>
  // 等同于
  type TExtract3 = never

Omit

获取 T 中不包含 K 属性的 新类型

  <!-- 源码 -->
  type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
  • keyof any 等同于 string | number | symbol ，也就是说 K 只能是这三种类型
  • keyof T 获取 T 的所有属性
  • Exclude 从T中剔除可以赋值给U的类型
  • Pick 从 T 类型中选取部分 K 类型，并返回新的类型，这里 T 常用于对象类型

说明：先通过 Exclued 获取 T 中不包含 K 属性的新类型， 再通过 Pick 获取 T 中包含 K 属性的新类型

  interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }

  type TOmit = Omit<IPeople, 'name' | 'sex' | 'color'>

  // 等同于
  type TOmit = {
    age?: number | undefined;
  }

NonNullable

去除 null 和 undefined 后的新类型

  <!-- 源码 -->
  type NonNullable<T> = T extends null | undefined ? never : T
  • 当 T 是联合类型时，则会循环 T 类型即： (T1 extends U ? never : T1) ｜ (T2 extends U ? never : T2) | …
  type TType= number | null | undefined
  type TNonNullable = NonNullable<TType>
  // 等同于
  // type TNonNullable = number

typeof具体使用

对象使用

自动生成对象的类型，如果对象上有类型则使用定义的类型

对象上无类型

  const people = {
    name: "liuyz",
    age: 20,
    info: {
      sex: "man",
      hobby: "sleep",
    }
   }
  
  type IPeople = typeof people
  // 等同于
  // type IPeople = {
  //   name: string
  //   age: number
  //   info: {
  //     sex: string
  //     hobby: string
  //   }
  // }
  
  type IPeople = keyof typeof people  // keyof 只会获取数据类型的第一级属性key
  // 等同于
  // type IPeople = "name" | "age" | "info"

对象上有类型

  type IPeople = {
    name: string | number
    age: number
  }
  
  const people: IPeople = {
    name: 9527,
    age: 18,
  }
  
  type INewPeople = typeof people
  // 等同于
  // type INewPeople = IPeople = {
  //   name: string | number
  //   age: number
  // }
  
  const newPeople: INewPeople = {
    name: "liuyz",
    age: 18,
  }
函数使用
  const add = (a: number, b: number): number => {
    return a + b
  }
  
  type TFunType = typeof add // 获取函数类型
  // 等同于
  // type TFunType = (a: number, b: number) => number
  type TReturnType = ReturnType<TFunType> // 获取函数返回值类型
  // 等同于
  // type TReturnType = number
  type TParamsType = Parameters<TFunType> // 获取函数参数类型，转变为元组类型
  // 等同于
  // type TParamsType = [a: number, b: number] // 元组类型
数组使用
  const arr = ['liu', 'y', 'z']
  type IArr = typeof arr
  // 等同于
  // type IArr = string[]
    
  const arr = ['liu', 'y', 1]
  type IArr = typeof arr
  // 等同于
  // type IArr = (string | number)[] // 字符串或数字 数组
    
  type IKey = keyof typeof arr
  // 等同于
  // type IKey = keyof string[]

注意：数组上使用 keyof typeof arr 是没有意义的

枚举使用
 enum EDirection {
    UP = "UP",
    DOWN = "DOWN",
  }
  
  type TDirection = typeof EDirection
  
  const direction: TDirection = {
    UP: EDirection.UP,
    DOWN: EDirection.DOWN,
  }
  
  console.log(direction) // { UP: 'UP', DOWN: 'DOWN' }
  
  type TNewDirection = keyof typeof direction
  // 等同于
  // type TNewDirection = "UP" | "DOWN"
  
  let newDirection: TNewDirection = "DOWN" // 这里只能取值 UP 或 DOWN
基本类型使用

基本类型使用 并没有什么意义

  const bool = true
  type TBool = typeof bool
  // 等同于
  // type TBool = true
  let newBool: TBool = true // 此时 newBool 只能赋值 true，否则报错
    
  const str = "test"
  type IStr = typeof str
  // 等同于
  // type IStr = "test"
  let newStr: IStr = "test" // 此时 newStr 只能赋值 test，否则报错
    
  const num = 10
  type INum = typeof num
  // 等同于
  // type INum = 10
  let newNum: INum = 10 // 此时 newNum 只能赋值 10，否则报错

相关文章

  • 高级TypeScript类型

    本文将提供使用typescript高级类型（Record，Partial，Required，Pick , Omit...

  • TS高级技巧（Pick，Partial等）

    1. keyof和in 1.1 keyof keyof 与 Object.keys 略有相似，只不过 keyo...

  • TS高级类型：Extract 与 Exclude

    Extract 是TS提供的一个TS高级type类型【简称TS高级类型】 Extract 用于类 Extract ...

  • typeScript语法

    ts类型 ts联合类型使用或 ts定义任意类型any ts定义函数返回值的类型 ts中的类定义 interface接口

  • ts高级类型

    类型的且运算 上面的代码c变量的类型为A和B，也就是要同时满足A和B里所有的字段定义，name、age和garde...

  • TS: 高级类型

    TS 文档是有一章叫高级类型，其实并不是真的“高级”，他实际的意思是将普通的类型用“某种方式”组合起来形成一个“组...

  • TypeScript自带的工具泛型

    前言 前面总结了ts的高级类型，下面再来说说ts给我们提供的一些基于这些高级类型而成的工具泛型。 Partial ...

  • typescript

    typescript ts暂时不被支持,所以需要编译使用;ts补充了js没有的语法特性,例如类型,接口,抽象等;由...

  • Ts 进阶使用指南

    # Ts 使用指南 ## 6、参数类型和返回类型 ```ts // 参数类型和返回类型 function crea...

  • Vue2.x中使用ts

    范例，HelloWorld.vue 声明文件 使用ts开发时如果要使用第三方js库的同时还想利用ts诸如类型检查等...

网友评论

      本文标题：TS中Record、Pick等9个高级类型使用详解

      本文链接：https://www.haomeiwen.com/subject/qscfsjtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|TS中Record、Pick等9个高级类型使用详解|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！