共计 5579 个字符,预计需要花费 14 分钟才能阅读完成。
TypeScript 内置类型一览
前文
当下而言,根本 TS 开发我的项目能够说是大势所趋,用过 TS 开发我的项目的同学都根本示意再也回不去啦,明天就让咱们来理解一下 TypeScript 官网的内置类型,让你的开发效率再上一层楼
Partial(局部的)
/**
* Make all properties in T optional
*/
type Partial<T> = {[P in keyof T]?: T[P];
};
作用是让传入类型中的所有属性变成都是可选的
应用举例
export interface Student {
name: string;
age: number;
}
const student1: Student = {}
const student2: Partial<Student> = {}
变量 student1 的类型是 Student,Student 默认所有的属性都是不能为空的,所有会报错,student2 就不会
Required(必须的)
/**
* Make all properties in T required
*/
type Required<T> = {[P in keyof T]-?: T[P];
};
跟 Partial 的作用是相同的,是让传入类型中的所有属性变成都是必填的
应用举例
export interface Student {
name?: string;
age?: number;
}
const student1: Student = {}
const student2: Required<Student> = {}
变量 student1 的类型是 Student,Student 默认所有的属性都是能够为空的,所有不会报错,student2 会报错
Readonly(只读的)
/**
* Make all properties in T readonly
*/
type Readonly<T> = {readonly [P in keyof T]: T[P];
};
作用是让传入类型中的所有属性变成都是只读的(不能批改属性)
应用举例
export interface Student {
name: string;
age: number;
}
const student1: Student = {
name: '张三',
age: 20
}
student1.age = 21
const student2: Readonly<Student> = {
name: '李四',
age: 20
}
student2.age = 21
给 student1 的属性 age 从新赋值不会报错,给 student2 的属性 age 从新赋值就会报错,因为 student2 所有的属性都是只读的
Pick(抉择)
/**
* From T, pick a set of properties whose keys are in the union K
*/
type Pick<T, K extends keyof T> = {[P in K]: T[P];
};
作用是抉择传入类型中的局部属性组成新类型
应用举例
export interface Student {
name: string;
age: number;
}
const student1: Student = {
name: '张三',
age: 20
}
const student2: Pick<Student, 'name'> = {name: '李四'}
const student3: Pick<Student, 'name'> = {
name: '王五',
age: 20
}
变量 student1 能够有所有属性 name 和 age,变量 student2 就只能有属性 name,变量 student3 加上属性 age 就会报错
Record(记录)
/**
* Construct a type with a set of properties K of type T
*/
type Record<K extends keyof any, T> = {[P in K]: T;
};
作用是构建一个类型,这个类型用来形容一个对象,这个对象的属性都具备雷同的类型
应用举例
export const student1: Record<string, any> = {
name: '张三',
age: 20
}
Record 应该是日常应用频率较高的内置类型了,次要用来形容对象,个别倡议是不必 Object 来形容对象,而是用 Record 代替,Record<string, any> 简直能够说是万金油了
Exclude(排除)
/**
* Exclude from T those types that are assignable to U
*/
type Exclude<T, U> = T extends U ? never : T;
针对联结类型(interface 这种没用),用人话说,排除雷同的,留下不同的
应用举例
export type PersonAttr = 'name' | 'age'
export type StudentAttr = 'name' | 'age' | 'class' | 'school'
const student1: Exclude<StudentAttr, PersonAttr>
student1 就只能被赋值为 ’class’ 或者 ’school’
Extract(取出)
/**
* Extract from T those types that are assignable to U
*/
type Extract<T, U> = T extends U ? T : never;
与 Exclude 相同,针对联结类型,排除不同的的,取出雷同的
应用举例
export type PersonAttr = 'name' | 'age'
export type StudentAttr = 'name' | 'age' | 'class' | 'school'
const student1: Extract<StudentAttr, PersonAttr>
student1 就只能被赋值为 ’name’ 或者 ’age’
Omit(省略)
/**
* Construct a type with the properties of T except for those in type K.
*/
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
传入一个类型,和这个类型的几个属性,把传入的属性省略掉,组成一个新类型
应用举例
export interface Student {
name: string;
age: number;
class: string;
school: string;
}
export type PersonAttr = 'name' | 'age'
export type StudentAttr = 'name' | 'age' | 'class' | 'school'
const student1: Omit<Student, PersonAttr> = {}
student1 报错,提醒没有属性 ’name’、’age’
NonNullable(不能为 null)
/**
* Exclude null and undefined from T
*/
type NonNullable<T> = T extends null | undefined ? never : T;
字面意思,不能为空
应用举例
export interface Student {
name: string;
age: number;
}
const student1: NonNullable<Student | undefined | null> = null
student1 赋值为 null 会报错(在 tsconfig.json 配置文件中开启类型查看,"skipLibCheck": false
)
Parameters(参数)
/**
* Obtain the parameters of a function type in a tuple
*/
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
获取传入函数的参数组成的类型
应用举例
export interface Student {
name: string;
age: number;
}
export interface StudentFunc {(name: string, age: number): Student
}
const student1: Parameters<StudentFunc>
student1 的类型为[name: string, age: number]
ConstructorParameters(结构参数)
/**
* Obtain the parameters of a constructor function type in a tuple
*/
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;
获取传入构造函数的参数组成的类型
应用举例
export interface Student {
name: string;
age: number;
}
export interface StudentConstructor {new (name: string, age: number): Student
}
const student1: ConstructorParameters<StudentConstructor>
student1 的类型为[name: string, age: number]
ReturnType(返回类型)
/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
获取传入函数的返回类型
应用举例
export interface Student {
name: string;
age: number;
}
export interface StudentFunc {(name: string, age: number): Student
}
const student1: ReturnType<StudentFunc> = {}
student1 的类型为Student
InstanceType(结构返回类型、实例类型)
/**
* Obtain the return type of a constructor function type
*/
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;
获取传入构造函数的返回类型
应用举例
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)
集体认为这是一个十分好用的内置类型,目前在前端我的项目中,class 是用的越来越多了,在 TS 中,class 其实也是能够用作类型申明空间的,用来形容对象类型,然而一般来说如同很少这样用的,个别用 interface 或者 type 居多
export class Student {
name: string;
age: number;
}
所以个别就是间接把 class 用作变量申明空间,然而对于 class new 出的实例,怎么形容它的类型呢,就如上文的,间接 const student1: Student
那是铁定会报错的,因为 Student 用作变量申明空间,没有用作类型申明空间(听起来好绕),这时候就能够用到 InstanceType,完满解决问题
Uppercase(大写)
/**
* Convert string literal type to uppercase
*/
type Uppercase<S extends string> = intrinsic;
变大写
应用举例
export type StudentSexType = 'male' | 'female'
const studentSex: Uppercase<StudentSexType> = 'MALE'
Lowercase(小写)
/**
* Convert string literal type to lowercase
*/
type Lowercase<S extends string> = intrinsic;
变小写
应用举例
export type StudentSexType = 'MALE' | 'FEMALE'
const studentSex: Lowercase<StudentSexType> = ''
Capitalize(首字母大写)
/**
* Convert first character of string literal type to uppercase
*/
type Capitalize<S extends string> = intrinsic;
首字母变大写
应用举例
export type StudentSexType = 'male' | 'female'
const studentSex: Capitalize<StudentSexType> = ''
Uncapitalize(首字母小写)
/**
* Convert first character of string literal type to lowercase
*/
type Uncapitalize<S extends string> = intrinsic;
首字母变小写
应用举例
export type StudentSexType = 'MALE' | 'FEMALE'
const studentSex: Uncapitalize<StudentSexType> = ''