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:

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

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

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

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)

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);//假设你拿到美女所有资料 传入构造函数

• 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)

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.

• 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

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

* 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)

* 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])

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]);

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!