At the front end, as a mature developer, 80% of bugs come from data type mismatch. This problem comes from the design idea of JS. It is a programming language with light data type, and it does not pay much attention to data type.

Many times the data changes internally according to its default behavior.

I won’t go into details here. Create your own js file and test it on the command line using Node xx. You can also test it in the browser using its editor.

So how to use JS is not so suffocating? This is where typescript comes in. Ts encapsulates data based on js, but otherwise is js native. First create two files in your editor: testjs.js and testts.ts

testjs.js

testjs.js
function green(name){
   return  `hello,${name}`
}
var result=green("lisi ");
console.log(result)---------------lisi 
var result=green({name:123});
console.log(result)---------------hello,[object Object]
Copy the code

${} = “hello”; ${} = “hello”; ${} = “hello”; ${} = “hello”;

Is not to care about what you put in. So how do you use TS?

Before using NPM, install node first. After installing node, NPM library can be automatically used. For specific operations, you can search for node installation steps in Baidu, remember to configure environment variables!

npm install -g typescript
Copy the code

Write code in the testts.ts file

function green(name:string){
    return  `hello,${name}`
}
var result=green("11111111");
console.log(result)
Copy the code

Note: The name must be a string, otherwise an error will be reported

On the command line, run TSC greeter.tsCopy the code

After executing the TSC command, you will automatically find a new file called tests. js in your directory. This file is the ts file compiled by the TSC command.

Run node testts.js in the testts file to get hello, 11111111Copy the code

Note that if you change the name value, you need to compile the file with TSC. Otherwise, after executing node, it will display the last compiled file.

If you write node testts and press enter, node will find the testts.js file in your directory and execute it.

Here’s an example of a more complex higher-order function that uses interfaces in TS to define complex data types.

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return `hello!${person.firstName} ${person.lastName}`}let user = {firstName: "Jane", lastName: "User" };
 const result=greeter(user)
 console.log(result)
Copy the code

It’s important to remember that interface is just a syntax sugar for defining data types. Syntactic sugar is what the compiler recognizes when you write it this way. Interface defines the properties of the object and the types of the properties. This means that the properties of the object passed in must contain firstName and lastName. In this case, the types of the two properties must also be strings.

tsc testts.ts
Copy the code
node testts.js
Copy the code

Here’s an example:

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return `hello!${person.firstName} ${person.lastName}$(person.fullName)`
}

let user = {firstName: "Jane", lastName: "User",fullName:"aaaaaaa" };
 const result=greeter(user)
 console.log(result)
Copy the code

The fullname attribute is not in person.

Here’s the class, in the testjs file

function greeter(person) {
    return "hello!" + person.firstName + "" + person.lastName;
}
class Student{
    constructor(firstName,lastName){
       this.firstName=firstName;
       this.lastName=lastName;
    }
}
var user = new Student("Jane"."User");
var result = greeter(user);
console.log(result);
Copy the code
Perform the node testjs -- -- -- -- -- - hello! Jane UserCopy the code

In testts.ts, the greeter needs to pass an object containing a fristName and a lastname of type string. In this case, we need to use the class to create the new object instead of using the {} literal to create the object.

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return `hello!${person.firstName} ${person.lastName}` } class Student{ constructor(firstName,lastName){ this.firstName=firstName; this.lastName=lastName; }}let user =new Student( "Jane"."User");

 const result=greeter(user)
 console.log(result)
Copy the code
Testts: 'firstName' and 'lastName' are not found in Student class. I do. How can you say no?Copy the code

If we modify the code: add public to the property

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return `hello!${person.firstName} ${person.lastName}` } class Student{ constructor(public firstName,public lastName){ this.firstName=firstName; this.lastName=lastName; }}let user =new Student( "Jane"."User");

 const result=greeter(user)
 console.log(result)
Copy the code
The TSC testts command succeeded. The TSC testts command succeeded. The TSC testts command succeeded. The TSC testts command succeeded.Copy the code

At this point you can use typescript in your project. Vue and React are both written in typescript, so you don’t have to worry about TSC compilation. See the documentation for using TS in your project.