A glance at TypeScript's built-in types

A glance at TypeScript’s built-in types

above

Basic TS development projects are a trend, and those of you who have used TS development projects say they will never go back. Today let’s take a look at TypeScript’s official built-in types to get your productivity up to a new level

I’m Partial.

/** * Make all properties in T optional */
type Partial<T> = {
    [P inkeyof T]? : T[P]; };Copy the code

The effect is to make all attributes in the incoming type optional

export interface Student {
  name: string;
  age: number;
}

const student1: Student = {}

const student2: Partial<Student> = {}
Copy the code

Student1 is Student, Student is null, Student is null, Student is null, Student is null, student2 is not null

Required (= Required)

/** * Make all properties in T required */
type Required<T> = {
    [P inkeyof T]-? : T[P]; };Copy the code

Partial is the opposite of Partial, which makes all attributes in the incoming type mandatory

export interfaceStudent { name? :string; age? :number;
}

const student1: Student = {}

const student2: Required<Student> = {}
Copy the code

Student1 is Student, Student is null, Student is null, Student is null, student2 is null

Readonly (read-only)

/** * Make all properties in T readonly */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
Copy the code

The effect is to make all attributes of the incoming type read only (cannot modify attributes).

export interface Student {
  name: string;
  age: number;
}

const student1: Student = {
  name: 'Joe'.age: 20
}
student1.age = 21

const student2: Readonly<Student> = {
  name: 'bill'.age: 20
}
student2.age = 21
Copy the code

Reassigning the age attribute to student1 does not generate an error. Reassigning the age attribute to student2 does, because all attributes of student2 are read-only

Pick up

/** * 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];
};
Copy the code

Select some attributes from the incoming type to form a new type

export interface Student {
  name: string;
  age: number;
}

const student1: Student = {
  name: 'Joe'.age: 20
}

const student2: Pick<Student, 'name'> = {
  name: 'bill'
}

const student3: Pick<Student, 'name'> = {
  name: 'Cathy'.age: 20
}
Copy the code

Student1 can have all the attributes name and age. Student2 can only have the attribute name. Student3 can have the attribute age

Record (Record)

/** * Construct a type with a set of properties K of type T */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
Copy the code

The purpose is to build a type that describes an object whose properties have the same type

export const student1: Record<string.any> = {
  name: 'Joe'.age: 20
}
Copy the code

Record should be the daily use of high frequency built-in type, mainly used to describe the Object, the general recommendation is not Object to describe the Object, but instead use Record, Record<string, any> almost can be said to be a versatile

Exclude

/** * Exclude from T those types that are assignable to U */
type Exclude<T, U> = T extends U ? never : T;
Copy the code

For union types (such as interfaces), use words to exclude the same ones and leave the different ones

export type PersonAttr = 'name' | 'age'

export type StudentAttr = 'name' | 'age' | 'class' | 'school'

const student1: Exclude<StudentAttr, PersonAttr>
Copy the code

Student1 can only be assigned to ‘class’ or ‘school’

Extract (Extract)

/** * Extract from T those types that are assignable to U */
type Extract<T, U> = T extends U ? T : never;
Copy the code

In contrast to Exclude, for a union type, Exclude the different and extract the same

export type PersonAttr = 'name' | 'age'

export type StudentAttr = 'name' | 'age' | 'class' | 'school'

const student1: Extract<StudentAttr, PersonAttr>
Copy the code

Student1 can only be assigned ‘name’ or ‘age’

Omit anything

/** * 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>>;
Copy the code

You pass in a type, along with several attributes of that type, and omit the attributes to form a new type

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> = {}
Copy the code

Student1: ‘name’, ‘age’

NonNullable (not null)

/** * Exclude null and undefined from T */
type NonNullable<T> = T extends null | undefined ? never : T;
Copy the code

Literally, can’t be empty

export interface Student {
  name: string;
  age: number;
}

const student1: NonNullable<Student | undefined | null> = null
Copy the code

Student1: null (enable type check in tsconfig.json configuration file, “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;
Copy the code

Gets the type of the arguments passed to the function

export interface Student {
  name: string;
  age: number;
}

export interface StudentFunc {
  (name: string.age: number): Student
}

const student1: Parameters<StudentFunc>
Copy the code

Student1 is of the type [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;
Copy the code

Gets the type of the arguments passed to the constructor

export interface Student {
  name: string;
  age: number;
}

export interface StudentConstructor {
  new (name: string.age: number): Student
}

const student1: ConstructorParameters<StudentConstructor>
Copy the code

Student1 is of the type [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;
Copy the code

Gets the return type of the passed function

export interface Student {
  name: string;
  age: number;
}

export interface StudentFunc {
  (name: string.age: number): Student
}

const student1: ReturnType<StudentFunc> = {}
Copy the code

Student1 is of type Student

InstanceType (construct return type, 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;
Copy the code

Gets the return type of the passed constructor

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('Joe'.20)

Copy the code

In TS, class can also be used as a type declaration space to describe object types. However, it is rarely used in this way. Interface or type are used more often than not

export class Student {
  name: string;
  age: number;
}
Copy the code

Const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: const student1: Student is a surefire way to get an error because Student is used as a variable declaration space, not as a type declaration space (sounds convoluted), so InstanceType is the perfect way to solve the problem

Uppercase

/** * Convert string literal type to uppercase */
type Uppercase<S extends string> = intrinsic;
Copy the code

Change the capital

export type StudentSexType = 'male' | 'female'

const studentSex: Uppercase<StudentSexType> = 'MALE'
Copy the code

Lowercase (Lowercase)

/** * Convert string literal type to lowercase */
type Lowercase<S extends string> = intrinsic;
Copy the code

Smaller writing

export type StudentSexType = 'MALE' | 'FEMALE'

const studentSex: Lowercase<StudentSexType> = ' '
Copy the code

Capitalize (Capitalize)

/** * Convert first character of string literal type to uppercase */
type Capitalize<S extends string> = intrinsic;
Copy the code

Capitalize the first letter

export type StudentSexType = 'male' | 'female'

const studentSex: Capitalize<StudentSexType> = ' '
Copy the code

Uncapitalize (lowercase)

/** * Convert first character of string literal type to lowercase */
type Uncapitalize<S extends string> = intrinsic;
Copy the code

Write the first letter smaller

export type StudentSexType = 'MALE' | 'FEMALE'

const studentSex: Uncapitalize<StudentSexType> = ' '
Copy the code

A glance at TypeScript’s built-in types