Articles
Einführung in TypeScript
Grundlagen von TypeScript

Grundlagen von TypeScript

Dieser Artikel erklärt die Grundlagen von TypeScript.

YouTube Video

Ausführung von "Hallo Welt!"

Zuerst führen wir das klassische "Hallo Welt!" Beispiel in TypeScript mit Visual Studio Code aus.

npm install -g typescript

Installieren Sie typescript mit dem Befehl npm.

Erstellen Sie eine Datei tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Erstellen Sie eine Datei .vscode/launch.json, um das Ausführen der Datei main.ts in Visual Studio Code zu ermöglichen.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Erstellen Sie eine Datei main.ts, die "Hallo Welt!" anzeigt. Sie können sie in Visual Studio Code ausführen, indem Sie die Taste F5 drücken.

1console.log("Hello World!");

Durch diese Konfiguration können Sie TypeScript-Dateien innerhalb von VSCode ausführen.

Übersicht über TypeScript

TypeScript (TS) ist eine von Microsoft entwickelte Obermenge von JavaScript. TypeScript unterstützt statische Typisierung, was robusteren und besser wartbaren Code ermöglicht.

Statische Typisierung

  • TypeScript fügt JavaScript Typen hinzu und führt Typprüfungen zur Kompilierungszeit durch. Dies ermöglicht das Verhindern von typbedingten Fehlern im Voraus.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilierung

  • Da TypeScript nicht direkt in einem Browser ausgeführt werden kann, muss es nach JavaScript transpiliert (kompiliert) werden. Verwenden Sie tsc (TypeScript Compiler), um TS-Dateien in JS-Dateien umzuwandeln.

Optionale Typanmerkungen

  • TypeScript führt auch Typinferenz durch, ermöglicht es Ihnen jedoch, Typen bei Bedarf explizit anzugeben. Dies verbessert die Lesbarkeit und Zuverlässigkeit des Codes.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Schnittstellen

  • TypeScript bietet Interface, um die Struktur von Objekten zu definieren. Dies ermöglicht eine strikte Verwaltung der Objektstruktur.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Klassen

  • TypeScript bietet Erweiterungen zur Klassensyntax von JavaScript und unterstützt Vererbung, Zugriffmodifikatoren (public, private, protected) und abstrakte Klassen.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Generika

  • In TypeScript können Sie wiederverwendbaren und typsicheren Code mit Generika schreiben.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ökosystem

  • TypeScript ist vollständig kompatibel mit dem JavaScript-Ökosystem und kann vorhandenen JavaScript-Code unverändert verwenden. Darüber hinaus ist es in beliebte Bibliotheken wie React und Node.js integriert.

Leistungsstarke Entwicklerwerkzeuge

  • TypeScript bietet erweiterte Funktionen wie Autovervollständigung, Refaktorisierungsunterstützung und Fehlerprüfung in Editoren wie VSCode.

TypeScript ist besonders nützlich, um die Zuverlässigkeit zu verbessern und die Produktivität der Entwickler in großen Projekten zu steigern.

Variablen in TypeScript

Dies erklärt die grundlegenden Konzepte und die Verwendung von Variablen in TypeScript.

Variablendeklaration

In TypeScript werden Variablen mit drei Schlüsselwörtern deklariert: let, const und var. Jedes Schlüsselwort hat unterschiedliche Eigenschaften.

Beispiel für let:

let hat Block-Scope (gültig nur innerhalb geschweifter Klammern {}). Werte können später neu zugewiesen werden.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Beispiel für const:

const kann nicht neu zugewiesen werden, daher kann der einmal zugewiesene Wert nicht geändert werden. Der Inhalt von Objekten und Arrays kann jedoch geändert werden.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Beispiel für var:

var hat Funktions-Scope und kann neu zugewiesen werden. Wenn Block-Scope ignoriert wird, kann dies zu unerwartetem Verhalten im Vergleich zu let oder const führen.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Typannotationen

In TypeScript können Sie Typen für Variablen explizit annotieren. Typinferenz wird ebenfalls unterstützt, aber Typannotationen sind in komplexen Szenarien nützlich.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Nicht initialisierte Variablen

Wenn eine Variable ohne Initialisierung deklariert wird, wird standardmäßig undefined zugewiesen. Eine mit let deklarierte Variable muss explizit auf undefined gesetzt oder undefined in ihrem Typ enthalten sein, wenn sie nicht initialisiert wird.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Variablenbereich

let und const haben Blockscope, daher sind sie nur innerhalb desselben Blocks gültig.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Variable Hoisting

Da TypeScript eine Obermenge von JavaScript ist, übernimmt es das Hoisting-Feature von JavaScript. Hoisting bezieht sich auf das Verhalten, bei dem Variablen- und Funktionsdeklarationen so behandelt werden, als ob sie an den Anfang ihres Gültigkeitsbereichs gehoben würden. Allerdings wird nur die Deklaration gehoben, während die Initialisierung an Ort und Stelle bleibt. Variablen, die mit var deklariert wurden, werden gehoben, aber die Verwendung von let oder const vor der Deklaration führt zu einem Fehler.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • In diesem Fall werden Variablen, die mit var deklariert wurden, gehoben, und ihre Werte werden ausgegeben.
1console.log(b); // ReferenceError
2let b = 20;
  • Variablen, die mit let deklariert wurden, werden nicht gehoben, was zu einem Fehler führt.

Zusammenfassung

Das Folgende ist eine Zusammenfassung von let, const und var.

  • let ist neu zuweisbar und hat Block-Scope.
  • const ist nicht neu zuweisbar und hat Block-Scope.
  • var ist neu zuweisbar und hat Funktions-Scope.
  • Alle erlauben explizite Typannotationen zur Festlegung von Variablentypen.

Escape-Zeichen in TypeScript

Escape-Zeichen werden verwendet, wenn bestimmte Zeichen nicht direkt eingegeben werden können oder um Zeichen darzustellen, die in einem String eine besondere Bedeutung haben. In TypeScript werden Escape-Zeichen verwendet, um Steuerzeichen oder Sonderzeichen darzustellen.

Verwenden Sie zum Beispiel \n, um eine Nachricht mit einem Zeilenumbruch auszugeben.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Spezialzeichen escapen

Escape-Zeichen sind auch nützlich, wenn Sonderzeichen in einem String enthalten sein sollen. Zum Beispiel möchten Sie möglicherweise Anführungszeichen oder einfache Anführungszeichen direkt in einem String verwenden.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Den Backslash selbst escapen

Um einen Backslash in einem String zu verwenden, müssen Sie ihn als doppelten Backslash schreiben.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicode- und Hexadezimal-Escapes

In TypeScript können Unicode-Codepunkte mithilfe von Escape-Sequenzen dargestellt werden.

Unicode-Escape-Sequenz

Unicode-Zeichen können Sie darstellen, indem Sie eine vierstellige hexadezimale Zahl nach \u angeben.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Hexadezimal-Escape

Bestimmte Zeichen können Sie darstellen, indem Sie eine zweistellige hexadezimale Zahl nach \x angeben.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Template-Literale und Escapes

Template-Literale werden durch Einschließen in Backticks definiert und bieten eine einfache Möglichkeit, eingebettete Ausdrücke oder mehrzeilige Zeichenketten zu erstellen. Reguläre Escape-Zeichen können direkt in Template-Literalen verwendet werden.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Sonderfälle

In TypeScript kann die Verwendung ungültiger Escape-Sequenzen in einem String zu einem Syntaxfehler führen. Es ist daher wichtig zu überprüfen, ob die Escape-Zeichen gültig sind.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Praktische Anwendungsbeispiele

Hier ist ein Beispiel für die Konstruktion eines komplexen Strings mit Escape-Zeichen.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

In diesem Beispiel wird \n für einen Zeilenumbruch und \t zur Einfügung einer Einrückung verwendet. Dadurch wird die JSON-Struktur leichter lesbar.

Zusammenfassung

Escape-Zeichen sind sehr wichtig, wenn man in TypeScript mit Strings arbeitet. Wenn Sie Sonderzeichen oder Steuerzeichen in einen String einfügen möchten, können Sie ausdrucksstarke Strings erstellen, indem Sie geeignete Escape-Sequenzen verwenden. Das Verstehen und korrekte Verwenden von Escape-Zeichen kann die Lesbarkeit und Wartbarkeit des Codes verbessern.

Versionen von TypeScript

Lassen Sie uns hier einen Überblick über die TypeScript-Versionen verschaffen.

  1. TypeScript 1.0 (2014)

    Die erste stabile Version von TypeScript. Grundlegende Funktionen wie Typisierung, Klassen und Module wurden eingeführt.

  2. TypeScript 2.0 (2016)

    Non-nullable Types, Control Flow Analysis, Read-only Properties und der Never-Typ wurden eingeführt, wodurch die Typinferenz verbessert wurde.

  3. TypeScript 3.0 (2018)

    Ein flexibleres Typsystem wurde eingeführt, mit Funktionen wie Project References, Erweiterungen von Tuple Types und Verbesserungen an Rest Parameters.

  4. TypeScript 4.0 (2020)

    Funktionen wie Variadic Tuple Types, Verbesserungen des Editors, erweiterte Typinferenz und Labelled Tuple Elements wurden hinzugefügt, um die Entwicklungserfahrung zu verbessern.

  5. TypeScript 4.1 (2020)

    Template Literal Types wurden eingeführt und machen die Manipulation von String-Typen leistungsfähiger.

  6. TypeScript 4.3 (2021)

    Die Hinzufügung des Override-Schlüsselworts, Verbesserungen bei Zugriffmodifikatoren in Konstruktoren und eine verbesserte Typunterstützung für WeakMap und WeakSet.

  7. TypeScript 4.5 (2021)

    Der Awaited-Typ, ModuleSuffixes und eine verbesserte Kompatibilität mit ECMAScript-Modulen wurden hinzugefügt.

  8. TypeScript 5.0 (2023)

    Die Standardisierung von Decorators, die Verbesserung der Projekt-Baugeschwindigkeit, die Erweiterung des Typsystems und die Unterstützung der neuesten ECMAScript-Features wurden eingeführt.

TypeScript entwickelt sich ständig weiter, mit mehreren Versionen pro Jahr, die neue Funktionen und Verbesserungen einführen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Datentypen in TypeScript