“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

As a front end, you must understand the following sentence very well:

JavaScript is a weakly typed (or dynamically typed) language, meaning that the type of a variable is indeterminate.

Weak type provides some convenience for our development, but also brings us some hidden trouble should not be investigated!

The advantage of weak types is that they are very flexible and can write very concise code. However, for large projects, strong typing is more beneficial, reducing the complexity of the system and finding type errors at compile time, reducing the programmer’s burden.

What are the dangers of weak typing?

Here we implement a very simple addition function

function add(sum1,sum2){
    return sum1+sum2
}
Copy the code

Here we are very simple implementation of some, this time some students want to ask, what is the problem? Let’s take a look at a few particular cases

let test1 = add(100.100)
let test2 = add(100.'100')
Copy the code

The weakness of weak typing is clearly identified in the two examples here. Without strong typing, there is no way to determine what type is passed in, and a lot of judgment needs to be made if we need to validate it!

So there have been attempts to make JavaScript a strongly typed language. Until strong typing is finally officially supported, this article describes two solutions that are available today

Flow

Vue2.0 builds with Flow. React builds with Flow

The installation command is as follows

$ npm install --global flow-bin
Copy the code

Flow can be used in many ways, but I’ll just give you a few examples. The previous two tools can only examine variables with declared types, whereas Flow can infer variable types.

/* @flow */
function foo(x) {
  return x*10;
}
foo("Hello, world!");
Copy the code

The first line of the above code is a comment indicating that you need to use Flow to check variable types.

$ flow check
hello.js:7:5.19: string
This type is incompatible with
/hello.js:4:10.13: number
Copy the code

Running the flow check command returns an error message: Foo is expected to take a number, but is actually a string.

Flow also supports variable type declarations.

/* @flow */
function foo(x: string, y: number) :string {
  return x.length * y;
}
foo("Hello".42);
Copy the code

And of course you can have this type of check

function foo(callback:(string,number) => void) {
   callback(The '-'.0)
}
foo(function(str,n) {no return value})Copy the code

Type summary

Learning to use flow is mainly for us to read the source more convenient, recommend the website www.saltycrane.com/cheat-sheet…

TypeScript (highly recommended)

TypeScript is a programming language released by Microsoft in 2012. It is a superset of JavaScript and can be compiled for JavaScript execution. Its best features are strong typing and ES6 Class support.

Installation:

npm install -g typescript
Copy the code

The above commands will install the TSC command in the global environment, and after the installation is complete, we can execute the TSC command anywhere.

How do YOU convert JS to TS?

Most JavaScript code becomes TypeScript code with minimal (or no) modification. Thanks to TypeScript’s powerful type inference, even without manually declaring the type of the variable foo, It can also automatically infer that a variable is of type number when it is initialized.

For example, js like this:

let foo = 1;
foo.split(' ');
Copy the code

The full TypeScript code looks like this:

let foo: number = 1;
foo.split(' ');
Copy the code

For tsconfig.json, please refer to the official manual (Chinese version).