The underlying type of ts

According to the official website, it is easy to remember

Official website document

1. number - number

let a: number = 0;
a = 5;

2. Boolean - boolean

let result: boolean = true;

3. string - string

let name: string = "";
name = "小明"

4. Array - number[] / string[]

4.1 Define an array composed of number elements, the type of each element must be number

let list: number[] = []; //数组中只能包含数字
list = [1,2,3] //Ok
list = ['a', 'b', 1] //Error: Type 'string' is not assignable to type 'number'

4.2 Define an array composed of string elements, the type of each element must be string

 let data: string[] = []; //数组中只能是字符串
 data = ['a','b','c'] //Ok
 data = [1,2,3] //Error: Type 'number' is not assignable to type 'string'

4.3 Define an array composed of any elements, the types of each element do not have to be the same, and can be of any type

let arr: any[] = [];
arr = ['a',1,'c'] //Ok

5. A tuple
   represents an array with a known number and type of elements, and the types of each element do not have to be the same

  let result: [number, string]; //数组中的第一项只能是数字，第二项只能是字符串
  result =  [1, 'red'] //Ok
  result = [1,2] //Error: Type 'number' is not assignable to type 'string'

6. enumeration - enum

enum Color {red, green}
let color: Color = Color[0];// red
let colorIndex = Color[red];//0

Application examples refer to the original

writing method

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
 switch ( status ) {
   case 0:
     return <Tag color="#108ee9">未提交</Tag>;
   case 1:
     return <Tag color="#2db7f5">待复核</Tag>;
   case 2:
     return <Tag color="#87d068">已通过</Tag>;
   case 3:
   default:
     return <Tag color="#f50">已驳回</Tag>;
 }
}

After enumeration with:

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

enum Status {total = -1, unSubmit = 0, waitCheck = 1, passed = 2, rejected = 3}

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
 switch ( status ) {
   case Status.unSubmit:
     return <Tag color="#108ee9">未提交</Tag>;
   case Status.waitCheck:
     return <Tag color="#2db7f5">待复核</Tag>;
   case Status.passed:
     return <Tag color="#87d068">已通过</Tag>;
   case Status.rejected:
   default:
     return <Tag color="#f50">已驳回</Tag>;
 }
}

7. any means any type

let list: any = []

When calling a method on a variable, use any type. Object type only allows assignment, as follows:
report an error Error: Property 'toFixed' doesn't exist on type 'Object'or Don't use `Object` as a type. The `Object` type actually meansuse Object type incorrectly. If you want to call a method, use any type and change Object to any.

let notSure: any = 4;
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

8. void means that there is no type, when a function does not return a value, you will see that its return type is void

function test(name: string){
  console.log('-----')
}

The above code does not declare that the type of the function is void. When checking the VS code, there will be a warning prompt: Missing return type on function, just modify it to the following

 function test(name: string): void{
  console.log('-----')
}

9. null and undefined

let value: null = null

However, when you specify the --strictNullChecks flag, null and undefined can only be assigned to void and their respective. This avoids many common problems. Maybe somewhere you want to pass in a string or null or undefined, you can use the union type string|null|undefined. Again, we'll cover union types later.

10. Never represents the type of values ​​that never exist
    Official website explanation: The never type is the return value type of a function expression or an arrow function expression that always throws an exception or has no return value at all; variables may also are of type never when they are bound by type guards that are never true.
    Simply put, a function that throws an exception and has no return value will be defined as a never type, as in the following example:

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

11. Object - represents a non-primitive type, that is, a type other than number, string, boolean, symbol, null or undefined
    注意：Object类型的变量只是允许你给它赋任意值，却不能够在它上面调用任意的方法，即便它真的有这些方法，不然会报错

12. Type Assertion - [as syntax | <> syntax]

12.1 "Angle brackets" syntax:

let someValue: any = "this is a string"
let strLength: number = (<string>someValue).length

12.2 as syntax:

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length

The type assertion using ts in vue only supports as syntax.