TypeScript泛型工具

本文介绍了TypeScript中的一些重要类型操作符,如Required将接口属性变为必选,Partial使其变为可选,Exclude从类型中移除指定部分,Extract提取类型的一部分,以及Readonly、Record、Pick、Omit、NonNullable、ReturnType和Parameters等,这些工具类型在开发中用于精细化类型管理。
摘要由CSDN通过智能技术生成
Required

将类型的属性变成必选

interface Person {
    name?: string
    age?: number
    hobby?: string[]
}

// 下面的类型不用定义, TypeScript自带
type Required<T> = {
    // -? 非常有意思, 相当于把可选的去掉
    [key in keyof T]-?: T[Key]
}
// Required 包裹之后 Person的所有属性变为必选了
const user1: Required<Person> = {
    name: "Ervin Howell",
    age: 26,
    hobby: ['code', '...']
}
Partial

Partial与Required相反, 将所有属性变为可选

interface Person {
    name: string
    age: number
    hobby: string[]
}

// 下面的类型不用定义, TypeScript自带
type Partial<I> = {
    [k in keyof T]?: T[K]
}

// Partial 包裹之后 Person的所有属性变为可选了
const user1: Partial<Person> = {
    name: "Ervin Howell",
    age: 26,
}
Exclude

Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉, 剩余部分构成新的类型

去除UnitTypeShort类型中的 ‘D’, ‘M’
// 下面的类型不用定义, TypeScript自带
type Exclude<T, U> = T extends U? never : T

type UnitTypeShort = 'd' | 'D' | 'M' | 'y' | 'h' | 'm' | 's' | 'ms'

const foo: Exclude<UnitTypeShort, 'D' | 'M'> = 'd'
const bar1: Exclude<UnitTypeShort, 'D' | 'M'> = 'D'
// 类型“"D"”不可分配给类型“"d" | "y" | "h" | "m" | "s" | "ms"”。你的意思是“"d"”?ts(2820)
const bar2: Exclude<UnitTypeShort, 'D' | 'M'> = 'M'
// 类型“"M"”不可分配给类型“"d" | "y" | "h" | "m" | "s" | "ms"”。你的意思是“"m"”?ts(2820)
Extract

和 Exclude<T, U> 相反, Extract<T, U> 从T中提取出U, 适用于并集类型

从T中提取出U
// 下面的类型不用定义, TypeScript自带
type Extract<T, U> = T extends U ? T : never;

const foo: Extract<'a' | 'b' | 'c', 'a' | 'b' | 'd'> = 'd'**加粗样式**
'a' | 'b' | 'c' extends 'a' | 'b' | 'd'? T :never
step1:('a' extends 'a' | 'b' | 'd'?'a':never) => 'a'
step2:('b' extends 'a' | 'b' | 'd'?'b':never) => 'b'
step3: ('c' extends 'a' | 'b' | 'd' ? 'c' : never) => never
res: 'a' | 'b' | never=>'a' | 'b'

泛型+extends 泛型传的是联合类型 先拆解判断再组装成联合类型

Readonly

数组或对象的所有属性值转换为只读, 这些属性不能被重新赋值

// 下面的类型不用定义, TypeScript自带
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}

interface Person {
    name: string
    age: number
    hobby: string[]
}

const user: Readonly<Person> = {
    name: 'Ervin Howell',
    age: 26,
    hobby: ['code', '...']
}
user.age = 25 
// 无法为“age”赋值,因为它是只读属性。ts(2540)

Record

Record<K extends keyof any, T>的作用是将K中的所有属性的值转换为T类型

// 下面的类型不用定义, TypeScript自带
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

interface Person {
    name: string
    age: number
    hobby: string[]
}
const correct: Record<Pe, string> = {
  name: 'Ervin Howell',
  age: '26岁'
}

const error: Record<Pe, string> = {
  name: 'Ervin Howell',
  age: 26
}
  // 不能将类型“number”分配给类型“string”。ts(2322)
Pick

从某个类型中挑出一些属性出来

// 下面的类型不用定义, TypeScript自带
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

interface Person {
  name: string
  age: number
  hobby: string[]
}
const foo: Pick<Person, 'name' | 'age'> = {
  name: 'Ervin Howell',
  age: 26
}
Omit

从某个类型中取出出去K的其他所有属性(与Pick相反)

// 下面的类型不用定义, TypeScript自带
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

interface Person {
  name: string
  age: number
  hobby: string[]
}
// 取出 除去 'age'和'hobby'之外的属性
const foo: Omit<Person, 'age' | 'hobby'> = {
  name: 'Ervin Howell'
}
NonNullable

去除类型中的null和undefined

// 下面的类型不用定义, TypeScript自带
type NonNullable<T> = T & {};

type p1 = NonNullable<string | null | undefined>
// type p1 = string
type p2 = NonNullable<string[] | number | undefined>
// type p2 = number | string[]
type p3 = NonNullable<string[] | number[] | { name: string } | undefined>
// type p3 = string[] | { name: string; } | number[]
ReturnType

用来得到一个函数的返回值类型

// 下面的类型不用定义, TypeScript自带
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any

type Fun2 = (value: string) => string

type off = ReturnType<Fun2>
// type off = string
Parameters

用于获得函数的参数类型所组成的元组类型

// 下面的类型不用定义, TypeScript自带
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

type p1 = Parameters<(a: number, b: string) => string>
// type p1 = [a: number, b: string]
keyof

使用泛型和keyof 约束参数

const user={
	name:'thethy',
	age:24,
	location:'shanghai'
}
function handler<T extends object,K extends keyof T>(obj:T,propName:K){}
handler(obj,'age')
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值