The previous article on understanding static type checking in TS explained the core role of TS. In this article, we start with the TS type.

The type in TS consists of three parts: the original type of JS, the type of TS extension, and the newly added function return type.

JS native type

Undefined, Null, Boolean, Number, String, Array

// Undefined and null are often used in conjunction with other types
// The union type represents one of several relationships of or

// num can be a number or undefined, where the initial num is undefined
// Type check error if only number is given
let num: number | undefined | null ;

let isSwitch: boolean = true;

let str:string = 'liuliuqi';

// Each member of the array is a number
// How to define an array whose members are both numbers and strings?
let arrNumber:number[] = [1.2.3];
Copy the code

Careful friends may notice that we did not mention the Object type. The official website explains the Object type as follows:

object is a type that represents the non-primitive type, i.e. anything that is not number, string, boolean, bigint, symbol, null, or undefined. With object type, APIs like Object.create can be better represented. Generally, you won’t need to use this.

Object is a type that represents a non-basic type, that is, any type that is not a number, string, Boolean, bigINT, symbol, NULL, or undefined. Apis such as Object.create can be better represented using Object types. Usually, you don’t need to use it.

interface ObjectConstructor {
  create(o: object | null): any;
  setPrototypeOf(o: any, proto: object | null): any;
}
Copy the code

Methods on the Object prototype chain, such as create/setPrototypeOf, restrict input parameter types to Object

The type of extension in TS

Enum, Any, Tuple

// defines the enumeration type Color
// If no value is assigned, the default value is index, starting from 0
// If a subitem is assigned a value, the index is incremented from that subitem
enum Color {
  Red,
  Green,
  Blue,
}
enum ColorTwo {
  Red = 3,
  Green,
  Blue,
}
let c: Color = Color.Green;
let c2: ColorTwo = Color.Green;

console,log(c) / / 1
console,log(c2) / / 4
Copy the code
// Any indicates Any type
let liuliuqi:any;

liuliuqi = 18;
liuliuqi = 'qbc';
liuliuqi = false;
Copy the code

What is the definition of an array whose members are both numbers and strings? Tuples solve this problem.

A tuple is an extension of an array, representing an array with a known number and type of elements

let arrStrNumber:[string, number] = ['liuliuqi'.18];
Copy the code

Function return type in TS

Void,  Never 

// void indicates that the non-return type is usually used as the return type of a function that has no value

function handle() :void {
  console,log('void no return');
}

// never indicates the type of value that never occurs. Usually used in exception throwing functions
function error(message: string) :never {
  throw new Error(message);
}
Copy the code

These are the types involved in TS.

Next: How to understand interfaces in TS

“A front-end learning small transparent, hard to learn front-end knowledge, at the same time to share some of their own thinking about life, welcome to discuss and exchange. If my article is helpful to you, please click a like, will be very grateful for your encouragement.”

How to understand the types of TS | creators training camp The campaign is under way…