Was ist TypeScript?

TypeScript ist eine kostenlose und Open-Source-Programmiersprache, die von Microsoft entwickelt wurde. Sie ist eine Obermenge von JavaScript und erweitert die Syntax von JavaScript.

Syntaxmerkmale

  • Klassen
  • Interfaces
  • Module
  • Typannotationen
  • Typprüfung zur Kompilierungszeit
  • Pfeilfunktionen (ähnlich den Lambda-Ausdrücken von C#)

Für weitere Inhalte siehe:TypeScript-Tutorial。

Der Unterschied zwischen JavaScript und TypeScript

TypeScript ist eine Obermenge von JavaScript und erweitert die Syntax von JavaScript. Daher kann vorhandener JavaScript-Code ohne Änderungen mit TypeScript verwendet werden. TypeScript bietet durch Typannotationen statische Typprüfung zur Kompilierungszeit.

TypeScript kann vorhandenen JavaScript-Code verarbeiten und kompiliert nur den darin enthaltenen TypeScript-Code.

TypeScript-Installation

Wir können TypeScript auf die folgenden zwei Arten installieren:

Die Oberfläche bei der Installation über eine MSI-Datei:

Schritte zur Installation über npm:

1. npm installieren

$ curl http://npmjs.org/install.sh | sh
$  npm --version
2.15.1

2. Das TypeScript-npm-Paket installieren:

$ npm install -g typescript

Nach der Installation können wir den TypeScript-Compiler namens tsc verwenden, der aus den Kompilierungsergebnissen js-Dateien erzeugen kann.

Um eine TypeScript-Datei zu kompilieren, verwenden Sie den folgenden Befehl:

tsc filename.ts

Nach erfolgreicher Kompilierung wird eine js-Datei mit demselben Namen im selben Verzeichnis erzeugt. Sie können den Standard-Ausgabenamen auch über Befehlsparameter ändern.

Standardmäßig zielt der Compiler auf ECMAScript 3 (ES3) ab, aber ES5 ist ebenfalls eine unterstützte Option. TypeScript fügt Unterstützung für Funktionen hinzu, die für den kommenden ECMAScript-6-Standard vorgeschlagen wurden.

TypeScript Hallo Welt

Zuerst erstellen wir eine index.html-Datei:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
    <script src="hello.js.html"></script>
</body> 
</html>

Erstellen Sie eine hello.ts-Datei. *.ts ist die Dateiendung für TypeScript-Dateien. Fügen Sie den folgenden Code zur hello.ts-Datei hinzu:

alert('hello world in TypeScript!');

Als Nächstes öffnen wir die Kommandozeile und verwenden den Befehl tsc, um die hello.ts-Datei zu kompilieren:

$ tsc hello.ts

Im selben Verzeichnis wird eine hello.js-Datei erzeugt. Öffnen Sie dann index.html, und die Ausgabe sieht wie folgt aus:

Typannotationen

TypeScript bietet statische Typen durch Typannotationen, um die Typprüfung zur Kompilierungszeit zu ermöglichen. Dies ist optional und kann ignoriert werden, um die regulären dynamischen Typen von JavaScript zu verwenden.

function Add(left: number, right: number): number {
    return left + right;
}

Die Annotationen für Basistypen sind number, bool und string. Die schwache oder dynamische Typstruktur ist der Typ any.

Typannotationen können in eine separate Deklarationsdatei exportiert werden, um die Typinformationen von TypeScript-Skripten, die Typen verwenden und nach JavaScript kompiliert wurden, verfügbar zu machen. Annotationen können für eine vorhandene JavaScript-Bibliothek deklariert werden, wie es für Node.js und jQuery geschehen ist.

Wenn keine Typen angegeben werden, verwendet der TypeScript-Compiler Typinferenz, um Typen abzuleiten. Wenn aufgrund fehlender Deklarationen kein Typ abgeleitet werden kann, wird standardmäßig der dynamische Typ any verwendet.

Beispiel

Als Nächstes erstellen wir eine einfache area()-Funktion in der TypeScript-Datei type.ts:

function area(shape: string, width: number, height: number) {
    var area = width * height;
    return "I'm a " + shape + " with an area of " + area + " cm squared.";
}
 
document.body.innerHTML = area("rectangle", 30, 15);

Als Nächstes ändernindex.htmldie js-Datei zutype.jsKompilieren Sie dann die TypeScript-Datei:tsc type.ts。

Aktualisieren Sie die Datei index.html im Browser, und die Ausgabe lautet wie folgt:

Benutzeroberfläche

Als Nächstes erweitern wir das obige Beispiel um ein Interface. Erstellen Sie eine Datei interface.ts und ändernindex.htmldie js-Datei zuinterface.js。

Der Code der Datei interface.js lautet wie folgt:

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;
}
 
function area(shape : Shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared";
}
 
console.log( area( {name: "rectangle", width: 30, height: 15} ) );
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) );

Ein Interface kann als Typannotation dienen.

Kompilieren Sie den obigen Codetsc interface.tsEs treten keine Fehler auf, aber wenn Sie nach dem obigen Code eine Anweisung hinzufügen, bei der der Parameter name fehlt, wird beim Kompilieren ein Fehler gemeldet:

console.log( area( {width: 30, height: 15} ) );

Kompilieren Sie erneut, und die Fehlermeldung lautet wie folgt:

$ tsc hello.ts 
hello.ts(15,20): error TS2345: Argument of type '{ width: number; height: number; }' is not assignable to parameter of type 'Shape'.
  Property 'name' is missing in type '{ width: number; height: number; }'.

Greifen Sie im Browser darauf zu, und die Ausgabe sieht wie folgt aus:

Pfeilfunktionsausdrücke (Lambda-Ausdrücke)

Lambda-Ausdruck()=>{something} oder ()=>somethingEr entspricht einer Funktion in JS. Sein Vorteil ist, dass er this in der Funktion automatisch an den Kontext binden kann.

Versuchen Sie, Folgendes auszuführen:

var shape = {
    name: "rectangle",
    popup: function() {
 
        console.log('This inside popup(): ' + this.name);
 
        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
 
shape.popup();

this.name ist im Beispiel ein leerer Wert:

Als Nächstes verwenden wir die Arrow-Funktion von TypeScript. Ersetzen Siefunction()durch() =>： 

var shape = {
    name: "rectangle",
    popup: function() {
 
        console.log('This inside popup(): ' + this.name);
 
        setTimeout( () => {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
 
shape.popup();

Die Ausgabe sieht wie folgt aus:

In der kompilierten JS-Datei des obigen Beispiels sehen wir eine Zeilevar _this = this;，_thisIn der Callback-Funktion von setTimeout() verweist es auf die name-Eigenschaft.

Klasse

TypeScript unterstützt ECMAScript-6-Klassen, die optionale Typannotationsunterstützung integrieren.

Als Nächstes erstellen wir eine Klassendatei class.ts mit folgendem Code:

class Shape {
 
    area: number;
    color: string;
 
    constructor ( name: string, width: number, height: number ) {
        this.area = width * height;
        this.color = "pink";
    };
 
    shoutout() {
        return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }
}
 
var square = new Shape("square", 30, 30);
 
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

Die obige Klasse Shape hat zwei Eigenschaften, area und color, einen Konstruktor (constructor()) und eine Methode shoutout().

Die Parameter (name, width und height) im Konstruktor haben lokalen Gültigkeitsbereich, daher wird beim Kompilieren der obigen Datei im Browser folgende Fehlerausgabe angezeigt:

class.ts(12,42): The property 'name' does not exist on value of type 'Shape'
class.ts(20,40): The property 'name' does not exist on value of type 'Shape'
class.ts(22,41): The property 'width' does not exist on value of type 'Shape'
class.ts(23,42): The property 'height' does not exist on value of type 'Shape'

Als Nächstes fügen wir die Zugriffsmodifizierer public und private hinzu. Auf public-Member kann von überall zugegriffen werden, während auf private-Member nur innerhalb der Klasse zugegriffen werden kann.

Als Nächstes ändern wir den obigen Code, indem wir color als private und den Parameternamen des Konstruktors als public deklarieren:

...
private color: string;
...
constructor ( public name: string, width: number, height: number ) {
...

Da die Membervariable color auf private gesetzt ist, erscheint folgende Meldung:

class.ts(24,41): The property 'color' does not exist on value of type 'Shape'

Vererbung

Schließlich können wir von einer bestehenden Klasse erben und eine abgeleitete Klasse erstellen. Vererbung verwendet das Schlüsselwortextends。

Als Nächstes fügen wir den folgenden Code am Ende der Datei class.ts hinzu, wie unten gezeigt:

class Shape3D extends Shape {
 
    volume: number;
 
    constructor ( public name: string, width: number, height: number, length: number ) {
        super( name, width, height );
        this.volume = length * this.area;
    };
 
    shoutout() {
        return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
    }
 
    superShout() {
        return super.shoutout();
    }
}
 
var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );

Erklärung der abgeleiteten Klasse Shape3D:

  • Shape3D erbt von der Klasse Shape und erbt außerdem die Eigenschaft color der Klasse Shape.
  • Im Konstruktor ruft die super-Methode den Konstruktor Shape der Basisklasse Shape auf und übergibt die Werte der Parameter name, width und height. Vererbung ermöglicht es uns, den Code der Klasse Shape wiederzuverwenden, sodass wir this.volume berechnen können, indem wir die Eigenschaft area erben.
  • Die Methode shoutout() von Shape3D überschreibt die Implementierung der Basisklasse. Die Methode superShout() gibt direkt die Methode shoutout() der Basisklasse zurück, indem sie das Schlüsselwort super verwendet.
  • Für den Rest des Codes können wir die gewünschte Funktionalität nach unseren eigenen Anforderungen implementieren.

Referenzdokumentation