首页 前端知识 typeScript内置工具类型,通俗易懂,例子解释(Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable..)

typeScript内置工具类型,通俗易懂,例子解释(Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable..)

2024-05-03 18:05:10 前端知识 前端哥 8 955 我要收藏

TS常用内置的工具类型有,Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable、Parameters、ReturnType。记住这些,在开发中,将会提高我们的开发效率。

目录

Record

Readonly

Required

Partial

Extract

Exclude

Pick

Omit

NonNullable

Parameters

ReturnType


Record
  • 源码:
type Record<K extends string | number | symbol, T> = {
    [P in K]: T;
}

Record<key type, value type> 
  •  它的作用是将对象所有的属性都转化为需要的类型。将对象所有的属性的值转化为T类型,用Record<K extends keyof any,T>。我们可以用Record将各属性都变成字符类型,然后就可以直接赋值给下面的变量使用了
type Property = 'u1' | 'u2'
type User = Record<Property,string>;

const u:User = {
    u1:"xiaom",
    u2:"zhans",
}

Readonly
  • 源码:
    type Readonly<T> = {
      readonly [P in keyof T]: T[P];
    };
    
  •  它的作用是将数组或对象的属性值转为只读的。定义一个接口,用Readonly来处理这个接口之后,各属性就变成了只读的,如果赋值将会报错
interface U{
    name:string;
    age:number;
    gender?:"male" | "female";
}

let c:Readonly<U> = {
    name:"xiaom",
    age:10,
    gender:"male",
};

c.age = 190 //报错,错误的

Required
  • 源码:
ReturnType<T extends (...args: any) => any>
  •  它的作用是将类型的所有属性变成必选。
interface U {
    name?:string,
    age?:number,
    gender?:string[]
}


//比如我们定义一个接口,它的各属性都是可选的,我们用Require处理之后,各属性就变成了必选了,然后我们直接赋值给下面的变量即可


const c:Required<U> = {
    name:"xiaom"
    age:20,
    gender:["male"]
}

Partial
  • 源码:
type Partial<T> = {
    [P in keyof T]?: Partial<T[P]>
}
  • 它的作用是将类型的所有属性转换为可选属性。
interface U{
    name:string,
    age:number
}

// 比如我们定义一个接口,将它直接赋值给下面的变量就会报错,因为他们不统一

const c:U = {
    name:'xiaom'
}

// 我们用partial处理这个接口之后,接口的属性就变成了可选,就可以赋值给下面的变量使用了
const c:Partial<U> = {
    name:'xiaom'
}

Extract
  • 源码:
type Extract<T, U> = T extends U ? T : never
  • 它的作用是提取联合类型中某些类型,用Extract<T,U>,表示从T中提取出U。
//比如我们可以用Extract提取这些类型中的函数类型
type U = Extract<string | number | (() => void), Function>; // () =>void

Exclude
  • 源码:
type Exclude<T, U> = T extends U ? never : T
  • 它的作用是移除联合类型中某些类型,用Exclude<T,U>,表示从T中移除U
// 比如我们可以用Exclude移除掉数值类型
type U = Exclude<"string" | "number" | "boolean","number">; // "string" | "boolean" 

Pick
  • 源码:
    type Pick<T, K extends keyof T> = {
        [P in K]: T[P];
    };
    
  • 它的作用是从类型中挑出某些属性。
// 比如我们定义一个type类型

type U = {
    name:string,
    age:number,
    gender:string
}


// 我们可以用Pick提取出age 和gender两个类型

type c = Pick<U,"age" | "gender">;//{age:number; gender:string}

// 然后就可以直接将它赋值给下面的变量使用了

const u1:c = {
    age:30,
    gender:'xxxx'
}

Omit
  • 源码:
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>> 
  •  它的作用是从类型中移除一些类型,Omit<T,U>从T中取出除去U的其它所有属性
// 比如我们定义一个type类型

type U = {
    name:string,
    age:number,
    gender:string
}


// 我们可以用Omit移除掉后面两个类型

type U = Omit<User,"age" | "gender">

// 然后就可以直接将它赋值给下面的变量使用了

const c:U = {
    name:'xiaom'
}

NonNullable

 NonNullable: 它的作用是去除类型中的null和undefined

// 比如我们可以用nonNullable去除点这些类型中的null和undefined类型
type u = NonNullable<string[] | null | undefined>; // string[]

Parameters
  • 源码:
Parameters<T extends (...args: any) => any>
  • 它的作用获取函数的参数类型所组成的元组类型
//比如我们可以用Parameters获取到函数的参数组成的元组类型
type u = Parameters<(a:number,b:string) => void>; //[number,string]

ReturnType
  • 源码:
ReturnType<T extends (...args: any) => any>
  • 它的作用是获取函数的返回值类型
// 这个函数返回值类型是字符串类型,我们可以用RetrunType获取到它的返回值类型,然后就可以直接将它赋值给下面的变量使用
type fun = (value:string) => string;
const u:ReturnType<fun> = 'xiaom'
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6847.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!