TypeScript Tutorial
Erste Schritte mit TypeScript

Bemerkungen

Versionen

Installation und Einrichtung

Hintergrund

TypeScript ist eine typisierte JavaScript-Obermenge, die direkt in JavaScript-Code kompiliert wird. TypScript-Dateien verwenden im Allgemeinen die Erweiterung .ts . Viele IDEs unterstützen TypeScript, ohne dass ein anderes Setup erforderlich ist, aber TypeScript kann auch mit dem TypeScript Node.JS-Paket von der Befehlszeile aus kompiliert werden.

IDEs

Visual Studio

• Visual Studio 2015 enthält TypeScript.
• Visual Studio 2013 Update 2 oder höher enthält TypeScript oder Sie können TypeScript für frühere Versionen herunterladen .

Visual Studio Code

• Visual Studio Code (vscode) bietet kontextabhängige Autovervollständigung sowie Refactoring- und Debugging-Tools für TypeScript. vscode ist selbst in TypeScript implementiert. Verfügbar für Mac OS X, Windows und Linux.

WebStorm

• WebStorm 2016.2 TypeScript und einen integrierten Compiler. [Webstorm ist nicht kostenlos]

IntelliJ IDEA

• IntelliJ IDEA 2016.2 bietet Unterstützung für Typescript und einen Compiler über ein Plugin , das vom Jetbrains-Team verwaltet wird. [IntelliJ ist nicht frei]

Atom & Atom-Typoskript

• Atom unterstützt TypeScript mit dem Atom-Typoscript- Paket.

Erhabener Text

• Sublime Text unterstützt TypeScript mit dem Typoscript- Paket.

Befehlszeilenschnittstelle installieren

Installieren Sie Node.js

Installieren Sie das npm-Paket global

Sie können TypeScript global installieren, um von jedem Verzeichnis aus darauf zugreifen zu können.

npm install -g typescript

oder

Installieren Sie das npm-Paket lokal

Sie können TypeScript lokal installieren und in package.json speichern, um auf ein Verzeichnis zu beschränken.

npm install typescript --save-dev

Installationskanäle

Sie können installieren von:

• Stabiler Kanal: npm install typescript
• Betakanal: npm install typescript@beta
• Dev channel: npm install typescript@next

TypeScript-Code wird kompiliert

Der tsc Kompilierungsbefehl wird mit typescript tsc , mit dem Code kompiliert werden kann.

tsc my-code.ts

Dadurch wird eine Datei my-code.js erstellt.

Kompilieren Sie mit tsconfig.json

Sie können auch Kompilierungsoptionen bereitstellen, die mit Ihrem Code über eine Datei tsconfig.json werden. Um ein neues TypeScript-Projekt zu starten, cd in einem Terminalfenster in das Stammverzeichnis des tsc --init und tsc --init . Dieser Befehl generiert eine Datei " tsconfig.json " mit minimalen Konfigurationsoptionen (ähnlich wie unten).

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

Mit einer Datei tsconfig.json , die sich im Stammverzeichnis Ihres TypeScript-Projekts befindet, können Sie den Befehl tsc zum Ausführen der Kompilierung verwenden.

Hallo Welt

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

Hier haben wir eine Klasse, Greeter , die einen constructor und eine greet Methode hat. Wir können eine Instanz der Klasse mit dem new Schlüsselwort erstellen und eine Zeichenfolge übergeben, die die greet Methode an die Konsole ausgeben soll. Die Instanz unserer Greeter Klasse wird in der greeter Variablen gespeichert, die wir dann als greet Methode aufrufen.

Grundlegende Syntax

TypeScript ist eine typisierte Obermenge von JavaScript, was bedeutet, dass der gesamte JavaScript-Code gültiger TypeScript-Code ist. TypeScript fügt darüber hinaus viele neue Funktionen hinzu.

Mit TypeScript wird JavaScript mehr wie eine stark typisierte, objektorientierte Sprache, die C # und Java ähnelt. Dies bedeutet, dass TypeScript-Code für große Projekte leichter zu verwenden ist und dass Code leichter zu verstehen und zu verwalten ist. Die starke Typisierung bedeutet auch, dass die Sprache vorkompiliert werden kann (und ist) und dass Variablen keine Werte zugewiesen werden können, die außerhalb ihres angegebenen Bereichs liegen. Wenn zum Beispiel eine TypeScript-Variable als Zahl deklariert ist, können Sie ihr keinen Textwert zuweisen.

Diese starke Typisierung und Objektorientierung erleichtert das Debuggen und Verwalten von TypeScript. Dies waren zwei der schwächsten Punkte von Standard-JavaScript.

Typanmeldungen

Sie können Typdeklarationen zu Variablen, Funktionsparametern und Funktionsrückgabetypen hinzufügen. Der Typ wird wie folgt nach einem Doppelpunkt hinter dem Variablennamen geschrieben: var num: number = 5; Der Compiler überprüft dann die Typen (wenn möglich) während des Kompilierens und meldet Typfehler.

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

Die Grundtypen sind:

• number (sowohl Ganzzahlen als auch Gleitkommazahlen)
• string
• boolean
• Array Sie können die Typen der Elemente eines Arrays angeben. Es gibt zwei gleichwertige Möglichkeiten, Array-Typen zu definieren: Array<T> und T[] . Zum Beispiel:
  • number[] - Zahlenfeld
  • Array<string> - Array von Zeichenfolgen
• Tuples. Tupel haben eine feste Anzahl von Elementen mit bestimmten Typen.
  • [boolean, string] - Tupel, wobei das erste Element ein Boolean und das zweite Element ein String ist.
  • [number, number, number] - Tupel aus drei Zahlen.
• {} - Objekt, Sie können seine Eigenschaften oder den Indexer definieren
  • {name: string, age: number} - Objekt mit Namens- und Altersattributen
  • {[key: string]: number} - ein Wörterbuch mit Zahlen, die durch einen String indiziert sind
• enum - { Red = 0, Blue, Green } - Aufzählung, die Zahlen zugeordnet ist
• Funktion. Sie geben Typen für die Parameter und den Rückgabewert an:
  • (param: number) => string - Funktion, bei der ein Parameter für die Anzahl von Zeichenfolgen zurückgegeben wird
  • () => number - Funktion ohne Parameter, die eine Nummer zurückgeben.
  • (a: string, b?: boolean) => void - Funktion, die einen String und optional einen Boolean ohne Rückgabewert übernimmt.
• any - Erlaubt jeden Typ. Ausdrücke, die any werden nicht typgeprüft.
• void - steht für "nothing", kann als Funktionsrückgabewert verwendet werden. Nur null und undefined sind Teil des void Typs.
• never
  • let foo: never; -Der Typ der Variablen unter Typwächtern, die niemals wahr sind.
  • function error(message: string): never { throw new Error(message); } - Als Rückgabetyp von Funktionen, die niemals zurückgegeben werden.

• null - Typ für den Wert null . null ist implizit Teil jedes Typs, sofern keine strengen Nullprüfungen aktiviert sind.

Casting

Sie können das explizite Gießen über spitze Klammern durchführen, zum Beispiel:

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

Dieses Beispiel zeigt eine derived Klasse, die vom Compiler als MyInterface behandelt wird. Ohne das Casting in der zweiten Zeile würde der Compiler eine Ausnahme someSpecificMethod() , da someSpecificMethod() nicht verstanden wird. someSpecificMethod() Casting durch <ImplementingClass>derived den Compiler an, was zu tun ist.

Eine andere Art des Castings in Typescript ist das Schlüsselwort as :

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

Seit Typescript 1.6 wird standardmäßig das Schlüsselwort as , da die Verwendung von <> in .jsx- Dateien mehrdeutig ist. Dies ist in der offiziellen Dokumentation zu TypeScript erwähnt .

Klassen

Klassen können im TypeScript-Code definiert und verwendet werden. Weitere Informationen zu Klassen finden Sie auf der Dokumentationsseite Klassen .

TypeScript REPL in Node.js

Für die Verwendung von TypeScript REPL in Node.js können Sie das Tsun-Paket verwenden

Installieren Sie es global mit

npm install -g tsun

und führen Sie Ihr Terminal oder die Eingabeaufforderung mit dem Befehl tsun

Anwendungsbeispiel:

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

Ausführen von TypeScript mit ts-node

ts-node ist ein npm-Paket, mit dem der Benutzer tsc Dateien direkt ausführen kann, ohne dass er mit tsc vorkompiliert werden tsc . Es bietet auch REPL .

Installieren Sie ts-node global mit

npm install -g ts-node

ts-node enthält keinen TypScript-Compiler, daher müssen Sie ihn möglicherweise installieren.

npm install -g typescript

Skript ausführen

Um ein Skript mit dem Namen main.ts auszuführen , führen Sie Folgendes aus

ts-node main.ts

// main.ts
console.log("Hello world");

Verwendungsbeispiel

$ ts-node main.ts
Hello world

REPL ausführen

Um REPL auszuführen, führen Sie den Befehl ts-node

Verwendungsbeispiel

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

Um REPL zu .exit verwenden Sie den Befehl .exit oder drücken Sie zweimal .exit CTRL+C