Typeof object –

We usually define the type first and then the variable, using typeof to get the typeof the variable.

const options = {
  a: 1
}
type Options = typeof options
Copy the code

Keyof — Enumeration type (can be understood asKeyof Object type)

Let’s start with the definition of keyof: the keyof operator can be used to enumerate all keys in an object. In layman’s terms, keyof fetches all the enumerated types of key values in an object.

interface Person {
  name: string;
  age: number;
}

type K1 = keyof Person; // "name" | "age"
type K2 = keyof Person[]; // "length" | "toString" | "pop" | "push" | "concat" | "join" 
type K3 = keyof { [x: string]: Person };  // string | number
Copy the code



You can see the use oflet a: { [key in keyof Person]: string };You can seekeyof PersonThe returnedEnumerated type.

In — Enumeration type

In is defined to iterate over enumerated types. Note: In only iterates over enumerated types, not objects (keyof iterates over objects (types)).

Partial (type Partial

= {[P in keyof T]? : T [P]}) [P in T], keyof is used. : T [P] would be an error, because the T [P], T as the object, and by the [P] in T, T only string | number | symbol, and so has a conflict.

Consider the following example:

export enum IFlag {
  A = 'A',
  B = 'B',
  C = "C",
  D = "D",}export const OFlag: {[key inIFlag]? : string} = { [IFlag.A]:'A' situations,
  [IFlag.B]: 'scenario B',
  [IFlag.C]: 'scenario C',
  [IFlag.D]: 'the situation D',}Copy the code

In a project, use this method to manage some fixed key values in the page, such as the SELECT drop-down option:

<select>
  <option value="A">Scene A</option>
  <option value="B">Scenario B</option>
  <option value="C">Situation C</option>
  <option value="D">The situation D</option>
</select>
Copy the code

IFlag enumerates all the values as the input parameters of the interface, and displays the text of the OFlag configuration page. Note: IFlag needs to be defined as a string enumeration.

Partial — Object type

Partial implementation source node_modules/typescript/lib/lib. Es5. Which s

type Partial<T> = { [P inkeyof T]? : T[P] };Copy the code

[P in keyof T] = P in keyof T, T[P] = P in keyof T,? Represent attribute optional.

Required — Object type

Required to achieve the source code node_modules/typescript/lib/lib. Es5. Which s.

type Required<T> = { [P inkeyof T]-? : T[P] };Copy the code

-? The +? Attribute () function removes the optionality of an optional attribute and makes it mandatory. (Equivalent to?) , function and -? Instead, you make the property optional.

  • [P in keyof T]? : T[P]: optional
  • [P in keyof T]+? : T[P]: Optional, equivalent to?
  • [P in keyof T]-? : T[P]: will choose
  • [P in keyof T]: T[P]: Optional remains optional, mandatory remains mandatory

Exclude<T, U> — Enumeration type

The type after the intersection of T and U is removed from T. Exclude implementation source node_modules/typescript/lib/lib. Es5. Which s.

type Exclude<T, U> = T extends U ? never : T;
Copy the code

Example:

type T = Exclude<1 | 2 | 3 | 4 | 5.3 | 4>
Copy the code

Extract<T, U> — Enumeration type

Extract the intersection type of T and U from T. Extract implementation source node_modules/typescript/lib/lib. Es5. Which s.

type Extract<T, U> = T extends U ? T : never;
Copy the code

Example:

type T = Extract<1 | 2 | 3 | 4 | 5.3 | 4>  // T = 3 | 4
Copy the code

Pick<T, K> — Object type

Extract an attribute from T with the same attribute value as K. Pick implementation source node_modules/typescript/lib/lib. Es5. Which s.

Pick and Extract both Extract T and K from T. The difference between Pick and Extract is that Pick works on the type of the object and returns the type used to define the object. Extract acts on an enumerated type, and the returned type is used to define an enumerated type variable.

type Pick<T, K extends keyof T> = { [P in K]: T[P]; };
Copy the code

Example: Given that the Person type has name, age, and sex attributes, we can use Pick when we want to generate a new type that only supports name and age:

interface Person {
  name: string,
  age: number,
  sex: string,
}

let person: Pick<Person, 'name' | 'age'> = {
  name: 'wang'.age: 21,}Copy the code

Omit<T, K> (not built in)

Removes key from object T as an attribute in K. Omit Omit is not built into TS and may be implemented using Pick and Exclude.

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
Copy the code

Example: Remove the name attribute from Person.

interface Person {
  name: string,
  age: number,
  sex: string,
}

let person: Omit<Person, 'name'> = {
  age: 18.sex: 'male'
}
Copy the code

Record<K, T>

Convert the values of all attributes in K to type T. Record implementation source node_modules/typescript/lib/lib. Es5. Which s.

type Record<K extends keyof any, T> = { [P in K]: T; };
Copy the code

Example: Cast all attribute values in Person to string types.

interface Person {
  name: string,
  age: number,
}

let person: Record<keyof Person, string> = {
  name: 'wang'.age: '12',}Copy the code

NonNullable<T> — Enumeration type

Discard T – null, undefined type. NonNullable implementation source node_modules/typescript/lib/lib. Es5. Which s.

type NonNullable<T> = T extends null | undefined ? never : T;
Copy the code

Example:

type T = NonNullable<string | string[] | null | undefined>; // string | string[]
Copy the code

ReturnType<T>

Gets the type of the return value of function T. ReturnType implementation source node_modules/typescript/lib/lib. Es5. Which s.

type ReturnType<T extends(... args: any[]) => any> = Textends(... args: any[]) => infer R ? R : any;Copy the code

Infer R is equivalent to declaring a variable and receiving the return value type of the incoming function. Example:

type T1 = ReturnType<() = > string>; // string
type T2 = ReturnType<(s: string) = > void>; // void
Copy the code

Conditional Types

The condition type tests both types, and then selects one based on the results of that test. The expression is T extends U? X: Y, that is, return type X if type T is a subtype of type U, and Y otherwise.

type NonNullable<T> = T extends null | undefined ? never : T;
Copy the code

A simple example is that when T is string, then B is type B = “1” and vice versa. You can see the same type, because the generic T passed in is different, the result is naturally different.

type B<T> = T extends string ? '1' : '2';


const a: B<string> = '1';
const b: B<number> = '1'; // Cannot assign type "1" to type "2"
Copy the code