This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

The joint type

A union type can also be called a multiple selection type. We can select a union type annotation, or a relationship, when we want to annotate a variable as one of multiple types

function css(ele:Element,attr:string,value:string|number ){ } let box = document.querySelector('.box') // The return value of document.querySelector is an associated type if(box){// TypeScript prompts the possibility of null, plus a more disciplined CSS (box, 'width', '100px'); css(box, 'opacity', 1); CSS (box, opacity, [1, 2]). / / error}Copy the code

Cross type

Crossover types, also known as merge types, can combine multiple types into a new type and extend an object with relationships

interface o1:{x:number; y:string}
interface o2:{z:number}

let o:o1&o2 = Object.assign({},{x:1,y:'2'},{z:100})
Copy the code

tip

TypeScript only converts syntax (such as extension operators, arrow functions, etc.) during compilation. TypeScript does not convert apis (it is not necessary to convert them, but introduces some extension libraries for processing). By default TypeScript loads the core type library according to target

If target is es5: [“dom”, “es5”, “scripthost”]

If target is es6: [“dom”, “es6”, “dom.iterable”, “scripthost”]

If you use code that is not the default repository, you can set it with the lib option

www.typescriptlang.org/docs/handbo…

Literal type

Sometimes, if we want to annotate a fixed value rather than a type, we can use a literal type, preferably with a federated type

function setPosition(ele: Element, direction: 'left' | 'top' | 'right' | 'bottom') { 
    // ... 
} 
// ok 
box && setDirection(box, 'bottom'); 
// error 
box && setDirection(box, 'hehe');
Copy the code

Type the alias

Again, type annotations are more complex, so we can give type annotations a relatively simple name

type dir = 'left' | 'top' | 'right' | 'bottom'; 
function setPosition(ele: Element, direction: dir) { // ... }
Copy the code

Define function types using type aliases

Note that if you have a type to define the type of the function, it is a little different from the interface

type callback = (a:string)=>string let fn:callback = function(a){}; (a:string) => string =function(a){}Copy the code

The difference between interface and type

interface

  • Only the types of Object/class/function can be described
  • Interfaces with the same name are automatically merged to facilitate extension

type

  • Can’t wish
  • Can describe all the data

Type inference

Displaying the annotation type every time can be cumbersome. TypeScript provides a more convenient feature: Type inference. The TypeScript compiler automatically deduces the annotation based on the current context.

  • Initialize variable
  • Set the default parameter values for the function
  • Return function value
Let x = 1; // Cannot assign type 'a' to number x = 'a'; Function fn(a = 1){return a * a} function fn(a){return a * a}Copy the code

Types of assertions

Sometimes we might annotate a more precise type (narrowing the scope of the type annotation), for example:

let img = document.querSelector("#img")
Copy the code

We can see that img has a type of Element, and Element is a generic type of Element. If we have a problem accessing SRC, we need to define the type more precisely, HTMLImageElement. In this case, we can use the type assertion, It is similar to a type conversion

Let img - <HTMLImageElement>document.querySelector("#img") or let img = document.querySelector('#img') as HTMLImageElement;Copy the code

Note: The assertion is only a prediction and does not have an actual effect on the data itself, i.e. it is like a transformation, but not a transformation