Wie komme ich von JavaScript zu TypeScript?

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man von JavaScript zu TypeScript wechselt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Wenn Sie TypeScript lernen möchten, müssen Sie meiner Meinung nach zunächst sehr gut mit nativem JavaScript vertraut sein. Die grundlegendsten Kenntnisse sind am wichtigsten. Dann müssen Sie ES5 + ES6 + ES7 beherrschen nach 7) und beherrschen Sie die neue Technologie, Sie werden in Zukunft nicht mehr so ​​müde sein. typeScript =type+javaScript, fügt einen Typ auf Basis von ES5/6/7+javaScript hinzu!

TS ist im Vergleich zu JS wirklich streng, solange es leicht mit der Schnittstelle oder dem Werttyp oder The übereinstimmt Wenn der Wert geändert wird und der Typ des ursprünglichen Werts nicht

ist, wird ein Fehler verursacht. Es wird empfohlen, npm zu verwenden, um TypeScript global zu installieren und dann tsc *.ts zum Kompilieren der TS-Datei zu verwenden.

'Das neue Kernkonzept von TypeScript:'let app:string=2; Dieser Code meldet einen Fehler Da der Wert 2 eine Zahl ist und die App als Zeichenfolgentyp angegeben ist, wird in TS ein Fehler gemeldet.

Neuer Werttyp:

beliebig: kann sein Beliebiger Typ
vold: ein leerer Rückgabetyp, z. B. Funktion move():vold{} Dies bedeutet, dass diese Funktion keinen Rückgabewert hat. Wenn sie in „beliebig“ geändert wird, kann es sich um einen beliebigen Typ der Funktion

handeln kehrt zurück, aber es muss zurückgegeben werden, sonst meldet TS einen Fehler

Neues Konzept: Typinferenz

• let app = 'hello' ; Dieser Code meldet einen Fehler, weil TS behandelt es erneut als let app:string = 'hello'. Um den Wert von

app zu ändern, muss es vom Typ String sein, andernfalls wird ein Fehler gemeldet. Dies ist eine Typinferenz

Union-Typ

• let app: string | number = 'hello' ; app = 1; Da app eine Union-Typ-Variable ist, kann es sich um

Zeichenfolge oder Zahl, sofern sie mit einem der Typen übereinstimmt. Das war's, natürlich können Sie mehr schreiben.

Schnittstellenschnittstelle (ein Punkt, der für Front-End-Programmierer schwer zu verstehen ist)

JavaScript ist ebenfalls eine objektorientierte Sprache, wird jedoch in ES5 basierend auf Prototypen implementiert. und wird in der ES6-Klasse verwendet. Dadurch erhalten Sie ein klareres Verständnis des Begriffs

objektorientiert, aber die tatsächliche Objektorientierung in TS ist vollständiger. Wie Sprachen wie JAVA. Es wird durch Schnittstellen und Klassen vervollständigt.

Sie können sich das Objekt als eine Frau vorstellen (abstrahiert in eine Variable let app in TS)
• Wir verwenden eine Schnittstelle, um diese Frau zu beschreiben (verwenden Sie let app in TS: Schnittstellenname )
• Verwenden Sie schließlich einige Methoden, um die Kontaktinformationen der Frau zu erhalten (verwenden Sie die Methode in der Klassenklasse in TS, um dies zu erreichen)

Zum Beispiel:

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

Auf diese Weise können Sie console.log(woman) ausdrucken, um zu sehen, wie es aussieht. Der obige Code enthält keinen Fehler.

• Nachdem der obige Code über den Befehl tsc in eine JS-Datei kompiliert wurde

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)

" Hier ist zu beachten, dass nach vielen TS-Codes werden kompiliert, sie sind es nicht Es wird in JS-Dateien angezeigt, z. B. in const enum-Aufzählungen, Schnittstellen usw. Natürlich werden Sie auf weitere "

###-Konzepte von Tupeln

Arrays stoßen in JS später. Es kann eine große Menge an Inhalten speichern. Das sogenannte Tupel ist eigentlich ein Array verschiedener Datentypen
• [1,'1',true,false] Tatsächlich ist dies ein Tupel , aber es heißt anders.

### Der Unterschied zwischen enumeration enum und const enum

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

enum app2 { red = 2, blue, pink, deeppink }
• console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // Ausgabe 2,3,4,5
• Der standardmäßige erste in der Aufzählung Der Wert ist 0; Sie können ihn auch selbst definieren, wenn die Anpassung mit dem Systemstandard in Konflikt steht, und

wird keinen Fehler melden, aber ich empfehle Ihnen, dies nicht zu tun Dies. Schließlich geht es niemandem gut.

### Es gibt auch eine konstante Aufzählung

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

* Wenn sie berechnete Elemente enthält, wird während der Kompilierungsphase ein Fehler gemeldet:

* const enum Color { Red, Green , Blue = "blue".length};
* Der Unterschied zwischen einer konstanten Aufzählung und einer normalen Aufzählung besteht darin, dass sie während der Kompilierungsphase gelöscht wird und keine berechneten Mitglieder enthalten kann. Nach einem Versuch werden Sie es wissen

Klassen und Schnittstellen (eine der wichtigsten)

* Eine Klasse kann jeweils nur eine Schnittstelle erben, aber sie kann mehreren Schnittstellen gleichzeitig entsprechen

* Wenn Sie die Vererbung mehrerer Klassen implementieren möchten, verwenden Sie Unterklassen, um weiterhin andere Klassen zu erben, und der Zyklus geht weiter

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

-------nach der TS-Kompilierung erhalten Sie

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 ist wahrscheinlich die schwierigste Art, elegante objektorientierte Programmierung zu verstehen. Die Schnittstelle dient nur der Beschreibung.

Um es wirklich zu implementieren, benötigen Sie die Klasse class, um es zu implementieren. ES6 spielt eine wichtige Rolle in TypeScript

Ich schlage daher vor, dass Sie zuerst natives JavaScript + ES6 lernen und dann TypeScript lernen, es wird viel einfacher sein,

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonWie komme ich von JavaScript zu TypeScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!