TS中的工具类型划分为:
- 操作接口类型
- 联合类型
- 函数类型
- 字符串类型
操作接口类型
假设我们定义了一个Person
interface Person {
name: string
gender?: string
age?: number
}
Partial<Type>,所有属性都变为可选
type Student = Partial<Person>
// 相当于
type Student = {
name?: string
gender?: string
age?: number
}
Required<Type>,所有属性都变为必选
type Student = Required<Person>
// 相当于
type Student = {
name: string
gender: string
age: number
}
Readonly<Type>,所有属性都变为只读
type Student = Readonly<Person>
// 相当于
type Student = {
readonly name: string
readonly gender?: string
readonly age?: number
}
Pick<Type, keys>,挑选出部分属性
type Student = Pick<Person, 'name' | 'gender'>
// 相当于
type Student = {
name: string
gender?: string
}
Omit<Type, keys>,剔除部分属性
type Student = Omit<Person, 'age'>
// 相当于
type Student = {
name: string
gender?: string
}
联合类型
Exclude<UnionType, ExcludedMembers>,针对联合类型,排除相同的,留下不同的
type a = string | number
type b = number
type c = Exclude<a, b>
// 相当于
type c = string
Extract<Type, Union>,针对联合类型,排除不同的,取出相同的
type a = string | number
type b = number
type c = Exclude<a, b>
// 相当于
type c = number
NonNullable<Type>,不能为null或undefined
type a = string | number | undefined | null;
type b = NonNullable<a>
// 相当于
type b = string | number
Record<keys, type>,生成接口类型
type MenuKey = 'home' | 'about' | 'more'
interface MenuValue {
label: string
show?: boolean
}
const menus: Record<MenuKey, MenuValue> = {
home: {
label: '主页'
},
about: {
label: '关于'
},
more: {
label: '更多',
show: false
}
}
函数类型
Parameters<Type>,获取传入函数的参数组成的类型
type p1 = Parameters<() => void> // []
type p2 = Parameters<(x:number, y?:string) => void> // [x:number, y?:string]
ReturnType<Type>,获取函数的返回类型
type p1 = ReturnType<() => void> // void
type p2 = ReturnType<() => string> // string
ConstructorParameters<Type>,获取传入构造函数的参数组成的类型
interface Student {
name: string;
age: number;
}
interface StudentConstructor {
new (name: string, age: number): Student
}
const student1: ConstructorParameters<StudentConstructor>
InstanceType<Type>,获取构造函数的返回类型
const Student = class {
name: string;
age: number;
constructor (name: string, age: number) {
this.name = name
this.age = age
}
showInfo () {
console.log('name: ', this.name, 'age: ', this.age);
}
}
const student1: InstanceType<typeof Student> = new Student('张三', 20)
ThisParameterType<Type>,获取函数的this类型
function fun(this: object, x: number): void {
console.log(this)
}
type p = ThisParameterType<typeof fun> // object
OmitThisParameterType<Type>,去除函数类型中的this类型
function fun(this: object, x: number): void {
console.log(this)
}
type p = OmitThisParameterType<typeof fun> // (x:number):void
ThisType<Type>,在对象字面量中指定this的类型
const obj: ThisType<{x: number}> & { getX: () => number } = {
getX() {
this; // {x: number}
return this.x
}
}