TypeScript Self-study Course (2) - Type Inference and Semantic Checking

Get into the habit of writing together! This is the 11th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Coding Environment: www.typescriptlang.org/en/play?#co…

type inference

In the coding area, enter the following code:

let userName= '123'
复制代码

userNameWhen you place the mouse on the string of code, you will see that the type inferred by TS isstring

image-20220413175812323

When you add the following code

userName = 18
复制代码

At this point, a red wavy line will appear below the string of codes. TS will prompt you: Type 'number' is not assignable to type 'string'.

image-20220413180125583

In JS, we can assign different types of values ​​to a variable. For example, userName here can be assigned a string or a number.

This kind of writing method that does not pay attention to the variable type may bring some subtle errors.

In TS, when we initialize a variable to a string type, we assign it a numeric type later! TS will throw specific error messages.

This is the type inference of TS. When we initialize a variable and assign a value. TS will infer the type from the assignment. For example: let userName= '123',TS

The inferred userNametype is string.

Of course, in addition to simple types, TS type inference also supports Object and Array type inference.

For example, for the user object below, TS will automatically infer the type of the user object as: {name:"搞前端的半夏"}, and the type of the internal attribute name can also be inferred.

let user={
  name:"搞前端的半夏"
}
复制代码

image-20220413211341770

image-20220413211502889

The same type inference applies to function returns.

For example, in the following example, result accepts the return value of the function 0. When the mouse is placed on the result, TS will prompt that the result is of type number.

function test() {
  return 0;
}
let tesult=test()
复制代码

image-20220413204028612

Semantic Analysis

Baidu Encyclopedia: Semantic analysis is a logical stage of the compilation process. The task of semantic analysis is to perform context-related properties and type review of structurally correct source programs.

In TS, the semantic analysis phase is divided into:

  • scope analysis
  • type checking

One of the goals of TS is to know possible errors in the code ahead of time during the development process by statically analyzing the code.

For example, the following code, this is an extreme example, it should not be written like this. Inside the test function, there is a for loop, unfortunately, we accidentally used the constdefinition in the loop i.

function test(){
    for(const i=0;i<100;i++){
    
     }
}
复制代码

In the TS environment:

image-20220413214144205

In the JS environment:

image-20220413214201141

Recommend a hardcore article:

Detailed interpretation of TypeScript source code

Guess you like

Origin juejin.im/post/7086088028984180767