TS advanced keyof

Finished painting type-challenges After all the simple and medium difficulty questions , Yes TypeScript There are some new understandings and understandings about the type operation of . Here are a few articles to record some important knowledge points .

This series of articles requires your understanding of TypeScript Have a basic understanding of

Basic usage

JavaScript adopt Object.keys() Get all attribute key values of the object , and typescript The main focus is on type operations , adopt keyof Operator can get all the key types in the object Joint type .

In order to know more about keyof The action of the operator , Let's use some examples to explain ：

type Person = {
  id: number;
  name: string;
  age: number;
};

type P1 = keyof Person; //'id' | 'name' | 'age'

keyof Operator gets Person All key value types of type, i.e 'id','name' and 'age' Three Literal type The type of association formed 'id' | 'name' | 'age'.

The practical application

Next, I will use some examples to explain keyof Application .

Get the types of all properties of the object

type P2 = Person[keyof Person];  // number | string

1. Person['key'] yes Query type (Lookup Types), You can get the type of the corresponding attribute type ;
2. Person[keyof Person] It's essentially execution Person['id' | 'name' | 'age'];
3. Because of the distributed nature of union types ,Person['id' | 'name' | 'age'] Turned into Person['id'] ｜ Person['name'] ｜ Person['age'];
4. The final result is number | string.

Constraining the range of the norm parameter

type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type P3 = MyPick<Person, 'id' | 'age'>

1. K extends keyof T Yes K There is a constraint , Can only be 'id','name','age' A union type consisting of one or more types in ;
2. Without this constraint ,{ [P in K]: T[P] } May be an error .

And mapping types to achieve certain functions

• Add... To all attributes of the object type readonly Modifier

type MyReadonly<T> = { readonly [P in keyof T]: T[P] };
type P4 = MyReadonly<Person>;  // { readonly id: number; readonly name: string; readonly age: number; }

1. [P in keyof T] Is to traverse the key value types of all attributes , From the case P Namely 'id','name' and 'age';
2. T[P] Is the query type , It was introduced above ,Person['id'] The result is number,Person['name'] The result is string,Person['age'] The result is number.
3. Add each attribute type readonly Modifier , The end result is { readonly id: number; readonly name: string; readonly age: number; }

• Remove some attributes of the object type

Microsoft officials are through Pick and exclude Combine to achieve Omit Logical , We can achieve the same function through the following code .

type MyOmit<T, K> = { [P in keyof T as P extends K ? never : P]: T[P] };
type P5 = MyOmit<Person, 'id' | 'name'> // {age: number;}

In code as P extends K ? never : P This part of the code is called Remap , Because what we don't necessarily need is P, In some cases, it is necessary to P Make some conversions ; In the case K It contains P The key value type is through never Ignored , On the contrary, keep . So the end result is {age: number;}

• Add new attributes to the object type

type AppendToObject<T, U extends keyof any, V> = {[P in keyof T | U]: P extends keyof T ? T[P] : V}
type P6 = AppendToObject<Person, 'address', string> // { address: string; id: number; name: string; age: number; }

And condition types to realize functions

• The two object types are merged into a new type

type Merge<F extends Record<string, any>, S extends Record<string, any>> = {
  [P in keyof F | keyof S]: P extends keyof S ? S[P] : P extends keyof F ? F[P] : never;
};

type Skill = {
  run: () => void;
}

type P7 = Merge<Person, Skill>; // { id: number; name: string; age: number; run: () => void; }

In the case P extends keyof S ？ X : Y The part of is called Condition type （ It will also be introduced separately later ）. The meaning in the code is if P yes F Property type of , Then take F[P], If P yes S Property type of , Then take S[P].

Summary

After the introduction , Should be right keyof There is some feeling in the use of . Let me list some code , You can feel it ：

type _DeepPartial<T> = { [K in keyof T]?: _DeepPartial<T[K]> }

type Diff<T extends Record<string, any>, U extends Record<string, any>> = {
  [P in keyof U | keyof T as P extends keyof U
    ? P extends keyof T
      ? never
      : P
    : P extends keyof T
    ? P
    : never]: P extends keyof U ? U[P] : P extends keyof T ? T[P] : never;
};

This implementation logic involves other knowledge points, which is a little complicated , It doesn't matter if you don't fully understand it , Later on .