内置类型

Partial （部分的）

作用是让传入类型中的所有属性变成都是可选的

  1. export interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  6. const student1: Student = {}
  7. const student2: Partial<Student> = {}

image.png
变量 student1的类型是 Student，Student 默认所有的属性都是不能为空的，所以会报错，student2就不会

Required（必须的）

跟 Partial 的作用是相反的，是让传入的类型中的所有属性变成都是必填的

  1. interface Student {
  2.   name?: string;
  3.   age?: number;
  4. }
  5. const student1: Student = {}
  6. const student2: Required<Student> = {}

image.png

Readonly (只读的)

作用是让传入类型中的所有属性变成都是只读的（不能修改属性）

  1. export interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  6. const student1: Student = {
  7.   name: '张三',
  8.   age: 20
  9. }
  10. student1.age = 21
  12. const student2: Readonly<Student> = {
  13.   name: '李四',
  14.   age: 20
  15. }
  16. student2.age = 21

image.png

Pick （选择）

作用是选择传入类型中的部分属性组成新类型

  1. interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  5. const student1: Student = {
  6.   name: '张三',
  7.   age: 20
  8. }
  9. const student2: Pick<Student, 'name'> = {
  10.   name: '李四'
  11. }
  12. const student3: Pick<Student, 'name'> = {
  13.   name: '王五',
  14.   age: 20
  15. }

image.png
变量student1可以有所有属性name和age，变量student2就只能有属性name，变量student3加上属性age就会报错

Record （记录）

作用是构建一个类型，这个类型用来描述一个对象，这个对象的属性都具有相同的类型

  1. const student1： Record<string, any> = {
  2.   name: '张三',
  3.   age: 20
  4. }

Record应该是日常使用频率较高的内置类型了，主要用来描述对象，一般建议是不用Object来描述对象，而是用Record代替，Record几乎可以说是万金油了

Exclude （排除）

  1. type PersonAttr = 'name' | 'age'
  2. type StudentAttr = 'name' | 'age' | 'class' | 'school'
  3. const student1: Exclude<StudentAttr, PersonAttr>

image.png
student1就只能被赋值为’class’ 或者’school’

Extract （取出）

与Exclude相反，针对联合类型，排除不同的的，取出相同的

  1. export type PersonAttr = 'name' | 'age'
  3. export type StudentAttr = 'name' | 'age' | 'class' | 'school'
  5. const student1: Extract<StudentAttr, PersonAttr>

image.png
student1就只能被赋值为’name’或者’age’

Omit（省略）

传入一个类型，和这个类型的几个属性，把传入的属性省略掉，组成一个新类型

  1. export interface Student {
  2.   name: string;
  3.   age: number;
  4.   class: string;
  5.   school: string;
  6. }
  8. export type PersonAttr = 'name' | 'age'
  10. export type StudentAttr = 'name' | 'age' | 'class' | 'school'
  12. const student1: Omit<Student, PersonAttr> = {}

image.png
student1报错，提示没有属性’class’、’school’，因为 name、age已经被忽略了

NonNullable （不能为null）

  1. export interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  6. const student1: NonNullable<Student | undefined | null> = null

image.png
student1赋值为null会报错（在tsconfig.json配置文件中开启类型检查，”skipLibCheck”: false）

Parameters （参数）*

获取传入函数的参数组成的类型

  1. interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  5. interface StudentFn {
  7.   (name: string, age: number): Student
  8. }
  9. const student1: Parameters<StudentFn>

image.png
student1的类型为[name: string, age: number]

ConstructorParameters （构造参数）*

  1. export interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  6. export interface StudentConstructor {
  7.   new (name: string, age: number): Student
  8. }
  10. const student1: ConstructorParameters<StudentConstructor>

image.png

RetrunType （返回类型）*

获取传入函数的返回类型

  1. export interface Student {
  2.   name: string;
  3.   age: number;
  4. }
  6. export interface StudentFunc {
  7.   (name: string, age: number): Student
  8. }
  10. const student1: ReturnType<StudentFunc> = {}

image.png
student1的类型为Student

InstanceType (构造返回类型、实例类型)

获取传入构造函数的返回类型

  1. const Student = class {
  2.   name: string;
  3.   age: number;
  4.   constructor (name: string, age: number) {
  5.     this.name = name
  6.     this.age = age
  7.   }
  8.   showInfo () {
  9.     console.log('name: ', this.name, 'age: ', this.age);
  10.   }
  11. }
  13. const student1: InstanceType<typeof Student> = new Student('张三', 20)

image.png

Uppercase （大写）

  1. export type StudentSexType = 'male' | 'female'
  3. const studentSex: Uppercase<StudentSexType> = 'MALE'

image.png

Lowercase （小写）

  1. export type StudentSexType = 'MALE' | 'FEMALE'
  3. const studentSex: Lowercase<StudentSexType> = ''

image.png

Capitalize （首字母大写）

  1. export type StudentSexType = 'male' | 'female'
  3. const studentSex: Capitalize<StudentSexType> = ''

image.png

Uncapitalize （首字母小写）

  1. export type StudentSexType = 'MALE' | 'FEMALE'
  3. const studentSex: Uncapitalize<StudentSexType> = ''

异步请求返回的数据约束

  1. interface UserInfo {
  2.   name: string
  3.   age: number
  4. }
  6. interface ReturnResult {
  7.   code: number,
  8.   data: UserInfo,
  9.   msg: string | null
  10. }
  12. function request<T>(url: string):Promise<T> {
  13.   return fetch(url).then(res => res.json())
  14. }
  16. request<ReturnResult>('user/info').then(res => {
  17.   console.log(res)
  18. })

泛型

泛型的约束

any、unknown、never和void有什么区别

  • any：任意类型的变量
  • unknown： 表示未知类型
    unknown与any类似，但使用前必须进行断言或守卫
  • never：永不存在的值的类型
  • void：无任何类型，没有类型
    用于函数时，never表示函数用于执行不到返回值那一步（抛出异常或死循环）的返回值类型，即永不存在的值的类型。
    而void则表示没有返回值、不返回、或返回 undefined