1. Union Type

“|” type “or” joint statement type

Analogy in js | | or symbol type declaration or use the symbol “|”

Federated types can also combine interface types to represent more complex type structures

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

const getPet: () = > Bird | Fish = () = > {
  return {
   // ...
  } as Bird | Fish;
  
  / / return here {} If you don't type alleging will return values for Bird | Fish will quote type errors
};

const Pet = getPet();
Pet.layEggs(); // ok
Pet.fly(); // ts(2339) 'Fish' has no 'fly' attribute; 'the Bird | Fish' not 'fly' properties

Pet. Fly will report a type error because there is no fly attribute in FishUsing ainOperator determines the type guardif ('fly' in Pet) {
  Pet.fly(); // ok
}
Copy the code

Intersection 2

There is logic or, just like JS there is logic and ampersand to cross types, and obviously if we just do ampersand to some of the basic types it’s going to declare some “nonexistent” types because no type can belong to more than one atomic type, For example, both string and number. Therefore, these “non-existent” types are never.

A cross type can also be understood as a type derived from the union of interface types

  1. The result of merging multiple interface types can be obtained by combining multiple interface types
  type IntersectionTypeConfict = { id: number; name: string; } and {age: number; sex: string; };
  const mixedConflict: IntersectionTypeConfict = {
    id: 1.sex: 'male'.age: 2.name: '123'
  };
Copy the code
  1. What is the effect of having an attribute of the same name in multiple merged interface types?

It can be divided into two cases:

  • Compatible properties with the same name: Compatible properties with the same name are subtypes of both types when combined (same type name = string & ‘2’ // ‘2’)
  • Incompatible: incompatible merge will result in never (same as type name = string & number //never)

Merge union types (cross union types === intersection of union types)

After merging a union type, the generated type needs to satisfy different union type constraints at the same time, that is, the same type members of all union types are extracted. Merging a union type can be understood as finding the intersection of two union types

 type UnionA = 'a' | 'b' | 'c' | 'd';
 type UnionB = 'c' | 'd' | 'e' | 'f';
 type UnionC = UnionA & UnionB  // type UnionC = 'c' | 'd'
Copy the code

3. The join and cross types themselves can be used directly in combination

Joint, crossover operator on the behavior performance not only, also in the operation of priority and JavaScript logic or | |, logic and joint operators && operator on line | priority under crossover operators &, similarly, we can through the use of the small bracket () to adjust the priority of the operators In turn, We can also introduce basic rules such as allocation rates and commutation laws into type combinations and optimize for cleaner, cleaner types

4. Type reduction

  1. What happens if you combine string primitives and string literals into a joint type? The effect is that the type is reduced to string

type a = string | ‘string’ => type a = string

  1. The same type reduction logic applies to number Boolean enumerated types
 type URStr = 'string' | string; // The type is string
  type URNum = 2 | number; // The type is number
  type URBoolen = true | boolean; // The type is Boolean
  enum EnumUR {
    ONE,
    TWO
  }
  type URE = EnumUR.ONE | EnumUR; // The type is EnumUR
Copy the code

Ts makes a reasonable “optimization” by reducing literal and enumerator types to primitive and enumerator types. But with hints in the IDE, BorderColor will only display string literals like black, red, etc. All string literals are not automatically displayed. Ts provides a dark magic trick that allows type reduction to be controlled by adding it after the parent type & {}

  type BorderColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | string; // The type is reduced to string
    type BorderColor2 = 'black' | 'red' | 'green' | 'yellow' | 'blue' | string & {}; // All literal types are preserved
Copy the code
  1. Similarly, when the members of a union type are interface types, if the attributes of one interface are a subset of the attributes of the other interface, that attribute is also type reduced
type UnionInterce = { age: "1" } | { age: "1" | "2"; [key: string] :string };
Copy the code

Consider: How to define an object with the following age attribute as a numeric type and other undefined attributes as a string data structure (using type reduction)?

{
  age: 1.// Number type
  anyProperty: 'str'.// All other indeterminate attributes are strings. }Copy the code