The last two articles:

Why should we learn TypeScript?

Getting started with TypeScript: Type system and configuration files

Scope problem

A variable name error may occur even if the same variable name exists in different files. You can wrap the scope with immediate execution functions.

(
  function () {
    consta: number =66;
    constb: string ='bbb';
  }
)()
Copy the code

It is not convenient to execute functions immediately. Here, we use modularity in ES6 as a unit of file. At the end of the code, we use export{} to label modularity code files.

const a: number =66;
const b: string ='bbb';

​export{}
Copy the code

In real development scenarios, import and export are generally implemented using modular syntax rules.

The Object type

The Object type in TS contains arrays, functions, and objects.

const f1:object =function(){}
const a1:object = []
const o1:object = {}

export {}
Copy the code

The specific type of the object is limited. The annotated object must have a specific attribute name and type, and the value must correspond one by one, not more or less.

// Const o2:{n1:number,s2:string} = {n1:666,s2:' Xilinglaoshi '}Copy the code

Of course, the more professional approach is to use interfaces.

An array of

  • The definition of a normal array

Arrays can be defined in two ways, using generics and plain annotations.

// xx: type < element type > const arr:Array<number>= [2,3,66]// Array of pure numbers const arr2:number[] = [66,77,88]Copy the code

  • A tuple type

An array that specifies the number and type of elements.

// Const tuple:[number,string] = [66,'xiling'] const age = tuple[0] const username = tuple[1] Const [ages,names] = tupleCopy the code
  • Enumerated type

Enumerated types are common in other programming languages, but not in JS. What can they do?

Let’s take a quick example:

Const post = {title:' Reverse of a watch ', Content :' There was once a very cheap watch, born in the Roman Empire... ', status:0// Article status 2 published, 1 unpublished, 0 draft}Copy the code

Status identifies the status property, which is confusing and easy to forget, and can also mess with other values. In the past, we used to use an object to mark the status, such as:

Const PostStatus = {Draft:0 Unpublished:1, Published:2} const post = {title:' A watch ', Content :' Once there was a very cheap watch, Born in the Roman Empire... ', status: poststatus. Published//// article status 2 Published, 1 unpublished, 0 draft}Copy the code

With enumerated types, we could do this:

// Define enumeration type data, Enum PostStatus {Draft=0, Unpublished=1, Published=2} const post = {title:' A very cheap watch was born in the Roman Empire... ', // Enumeration types are used the same as objects status: poststatus.published}Copy the code

It doesn’t seem to make much difference, but enumerations are great for incrementing. If no value is assigned, it defaults to zero, and if the first value is assigned, it starts accumulating from the first value.

// Define enumeration type data, enum PostStatus {Draft=6,// assign, then add, Unpublished, Published} const post = {title:' Reverse of a watch ', content:' There was once a very cheap watch that was born in the Roman Empire... ', // Enumeration types are used as objects status: poststatus.published} console.log(post)Copy the code

Enumerated values, of course, can also be strings, but strings are not cumulative, so, very rarely, I won’t cover them here.

We can compile and see the results. As you can see, it’s a two-way key-value object, so you can get a value by a key, and you can get a key by a value, and you can see when you compile it, it’s just storing an expression as a key. By doing so, we can get the name of the enumeration by subscript in TS.

If we are sure that we are not going to use an index for enumeration names in our code, then WE recommend using constant enumerations. After compiling, we can see in the JS code that enumerations have been removed, the specific values are used directly in the code, and the type names are annotated.

// Define enumeration type data, constenum PostStatus {Draft=6,// assign value, then add, Unpublished, Published} const post = {title:' Reverse of a watch ', content:' There was once a very cheap watch that was born in the Roman Empire... ', // Enumeration types are used as objects status: poststatus.published} console.log(post)Copy the code