TS工具类型Partial、Required、Readonly、Exclude、Extract、Omit、ReturnType的作用和实现?

80 阅读1分钟

1. 将英文翻译成中文。

  • a. Partial 部分类型
    
  • b. Required 必填类型
    
  • c. Readonly 只读类型
    
  • d. Exclude 排除类型 (基本类型)
    
  • e. Extract提取类型(基本类型)
    
  • f. Pick/Omit排除key类型 (对象类型)
    
  • g. ReturnType 返回值类型
    
  • h. Record 记录类型
    

2. 举例说明每个工具类型的用法。

partial:

interface User{
    id: string,
    name: string
}

const user: Partial<User>={
    name:'jackson'
}// 是User也不是User,是User的一部分,相当于
/*
Partial<User> = {
    id?:string | undefined,
    name?:string | undefined
} //不用写完整的user,把user上传到服务器再补全,再创建一个完全的user
*/

Required

interface User{
    id?: string,
    name: string
}

const user: Required<User>={
    id: '111', //必须写id
    name:'jackson' 
}

Readonly

interface User{
    id?: string,
    name: string
}

const user: Readonly<User>={
    id: '111', //必须写id
    name:'jackson' 
}
user.id = '222' //报错

Pick

interface User{
    id?: string,
    name: string
}

type God = Pick<User, 'id'|'name'> //表示God只要id和name,age不要

Omit

interface User{
    id?: string,
    name: string
}
type God2 = Omit<User, 'age'> //表示除了age我都要

Exclude

type Dir = '东'|'南'|'西'|'北'
type Dir2 = Exclude<Dir, '北'> //只剩东南西 排除
type Dir3 = Extract<Dir, '东'|'西'> //只有东和西 提取

ReturnType

function f(a:number,b:number){
    return a + b
}
type A = ReturnType<typeof f> //a的类型就是number 通过这个方法获得这个函数的返回值类型

Record

type a = Record<string, number> //左边为key的类型,右边为value的类型 这里表示key为string,value为number类型
//等价下面
type b = {
    [x:string]:number
}