How to go from JavaScript to TypeScript?

The content of this article is about how to go from JavaScript to TypeScript? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

If you want to learn typeScript, I think you must first be very proficient in native javaScript. The most basic knowledge is the most important, and then you must master ES5 ES6 ES7 (it is best to know some after 7). Once you master the new technology, you can It won't be so tiring. typeScript =type javaScript, adds a type on the basis of ES5/6/7 javaScript!

TS is really very strict compared to JS, as long as it slightly does not match the interface or value type, or it is If the number of parameters is incorrect, or if the value is changed and the type of the original value is not

consistent, an error will be reported. It is recommended to use npm to install typeScript globally and then use tsc *.ts to compile TS files

'The new core concept of typeScript:'let app:string=2;This code will report an error because the value 2 is a number, and the app is specified as string type, so an error will be reported in TS

New value type:

any: can be any type
vold:an empty Return type, such as function move():vold{} This means that this function has no return value. If it is changed to any, then it can be whatever type the function returns, but it must return otherwise TS will report an error

New concept: type inference

let app = 'hello' ; app=1 ; This code will report an error because TS treats it as let app:string = 'hello', again To change the value of

app, it must be of string type, otherwise an error will be reported. This is type inference

Union type

let app: string | number = 'hello' ; app = 1; This code will not report an error, because app is a union type variable, it can be either

string or number, as long as it matches one of the types That’s it, of course you can write more.

Interface interface (a point that is difficult for front-end programmers to understand)

javaScript is also an object-oriented language, but in ES5 it is implemented based on prototypes, and in ES6 it is used class class, this will give you a clearer understanding of the term

Object-oriented, but the actual object-oriented in TS is more complete. Like languages ​​like JAVA, it is complete through interfaces and classes. Object-Oriented Programming.

You can imagine the object as a woman (abstracted into a variable let app in TS)
• We use the interface to describe this woman (use let app in TS: interfacename )
• Finally use some methods to get the woman’s contact information (use the method in the class class in TS to achieve it)

For example:

class ask{

    name:string;
    
    tel ? :number  ;   //这里为什么加问号，因为你不一定能拿到她的号码，如果拿不到，那么便可以不传参数，
    
    但是如果不加? ，你又没那么号码，那么你没有参数传进来，TS就会报错 
    
    age:number ;
    
    constructor(name,age,tel){
         this.name=name;
         this.age=age;
         this.tel=tel
    }
}

interface check {

    name : string;
    
    age:number;
    
    tel ? :number;  
    
}

let woman :check = new ask ('rose',20,1888888888);//假设你拿到美女所有资料 传入构造函数

This way You can print console.log(woman) to see what it looks like. There is no error in the above code.

• After the above code is compiled into a JS file through the tsc command

var ask = /* @class / (function () {
function ask(name, age, tel) {


    this.name = name;
    
    
    this.age = age;
    
    
    this.tel = tel;
    
    
}
return ask;
}());
let woman = new ask('rose', 20, 1888888888);
console.log(woman)

"It should be noted here that after many TS codes are compiled, they are not Will appear in JS files, such as const enum enumerations, interfaces, etc. Of course, you will encounter more "

concepts of tuples

• arrays in JS later. It can store a large amount of content. The so-called tuple is actually an array of different data types
• [1,'1',true,false] In fact, this is a tuple, but it is called differently.

The difference between enumeration enum and const enum

• enum app { red, blue, pink, deeppink }
• console.log( app.red, app.blue, app.pink, app.deeppink) // Output 0,1,2,3

• enum app2 { red = 2, blue, pink, deeppink }
• console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // Output 2,3,4,5
• The default first one in the enumeration The value is 0; you can also define it yourself. If the customization conflicts with the system default, TS will not recognize it and

will not report an error, but I don’t recommend you do this. After all, no one is fine. Looking for trouble?

There is also a constant enumeration

const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; 
// 结果是 0 1 2 3

* If it contains calculated members, an error will be reported during the compilation phase: * const enum Color {Red, Green , Blue = "blue".length};

* The difference between a constant enumeration and a normal enumeration is that it will be deleted during the compilation phase and cannot contain calculated members. You will know after a try

Classes and interfaces (one of the most important)

* A class can only inherit one interface at a time, but it can correspond to multiple interfaces at a time

* If you want to implement Multiple classes inherit, then use subclasses to continue to inherit other classes, and the cycle continues

interface check {
name: string;
age: number;
hobby: Array<number>
fuck: number[]   //这两种写法是一样的
}

class exp implements check {
name: string
age: number
hobby:Array<number>
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
}
let app = new exp('hello', 18, [1, 2, 3], [2, 3, 4])

------After TS compilation, you get

var exp = /* @class / (function () {
function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;
}());
var app = new exp('hello', 18, [1, 2, 3], [2, 3, 4]);

typeScript is probably the most difficult That’s how to understand elegant object-oriented programming. The interface is just for description.

To really implement it, you need the class class to implement it. ES6 plays a very important role in typeScript. ###So I suggest you first Go learn native javaScript ES6 and then learn typeScript, it will be much easier, ###

This article has ended here. For more exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of How to go from JavaScript to TypeScript?. For more information, please follow other related articles on the PHP Chinese website!