Eine einfache Einführung in Typescript

Eine kurze Einführung in einige Konzepte von Typescript

TypeScript-Compiler

Der TypeScript-Compiler ist ein JavaScript-Programm, das TypeScript-Code in reinen JavaScript-Code umwandelt. Es ist in TypeScript geschrieben und kann auf jeder Plattform ausgeführt werden, die JavaScript unterstützt. Der TypeScript-Compiler ist Open Source und auf GitHub verfügbar. Der Compiler wird von Microsoft entwickelt und gewartet und kann über die Befehlszeile oder als Plug-in für beliebte IDEs wie Visual Studio und WebStorm verwendet werden.

Der TypeScript-Compiler kann JavaScript-Code ausgeben, der mit verschiedenen JavaScript-Laufzeiten wie Node.js, Internet Explorer und Chrome kompatibel ist. Es kann auch Source Maps generieren, die den generierten JavaScript-Code wieder dem TypeScript-Code zuordnen. Dies ermöglicht das Debuggen des TypeScript-Codes im Browser.

Der Compiler kann so konfiguriert werden, dass er auf Typfehler prüft und Fehler meldet, wenn welche gefunden werden. Die Typprüfung kann bei Bedarf deaktiviert werden. Der TypeScript-Compiler ist unter der Open-Source-Lizenz Apache 2.0 verfügbar.

Keine stark typisierte Sprache

Typoskript ist keine stark typisierte Sprache, da Variablen nicht mit einem bestimmten Typ deklariert werden müssen. Das bedeutet, dass eine Variable als ein Typ deklariert und dann einem Wert eines anderen Typs neu zugewiesen werden kann. Dies kann zu Fehlern führen, wenn die Variable auf eine Weise verwendet wird, die nicht mit dem Typ kompatibel ist, als der sie deklariert wurde.

Ein einfaches Beispiel zur Verdeutlichung dieser Eigenschaft sei mit dem Typ "beliebig" gezeigt.

// We initialze the variable as a string.
const something: any = "Tom";

// Now it's a number. This is valid TypeScript code.
something = 42;

Kompilieren von TypeScript zu JavaScript

Der TypeScript-Compiler nimmt TypeScript-Code und wandelt ihn in einfachen JavaScript-Code um. Dieser Vorgang wird als Transpilation bezeichnet. Der Compiler analysiert zuerst den TypeScript-Code, der auf Syntaxfehler prüft. Wenn keine Fehler gefunden werden, prüft der Compiler anschließend auf Typfehler. Wenn Typfehler gefunden werden, meldet der Compiler diese und beendet sich.

Wenn keine Typfehler gefunden werden, fährt der Compiler fort und gibt den JavaScript-Code aus. Der ausgegebene JavaScript-Code ist mit der angegebenen Ziel-JavaScript-Laufzeit kompatibel.

Der TypeScript-Compiler kann auch Quellzuordnungen generieren, die den generierten JavaScript-Code wieder dem TypeScript-Code zuordnen. Dies ermöglicht das Debuggen des TypeScript-Codes im Browser.

TypeScript-Sprachserver

Der TypeScript-Sprachserver ist ein Sprachserver, der Funktionen wie Codevervollständigung, Go-to-Definition und Typprüfung für TypeScript-Projekte bereitstellt.

Der Sprachserver ist erforderlich, damit der TypeScript-Compiler diese Funktionen bereitstellen kann. Ohne den Sprachserver wäre der TypeScript-Compiler nur in der Lage, grundlegende Funktionen wie Syntaxhervorhebung und Codeformatierung bereitzustellen. Der TypeScript-Sprachserver ist Open Source und auf GitHub verfügbar.

Schritte zum Erstellen eines TypeScript-Projekts

Bevor Sie die Schritte beschreiben, finden Sie hier den Befehl zum Initialisieren eines TypeScript-Projekts in Ihrem Terminal.

npx tsc --init

Beschreibung: Installieren Sie den TypeScript-Compiler. Erstellen Sie eine tsconfig.json-Datei im Stammverzeichnis des Projekts. Diese Datei enthält die Compileroptionen für den TypeScript-Compiler. Fügen Sie das src-Verzeichnis zur Datei tsconfig.json hinzu. Hier befinden sich die TypeScript-Quelldateien.

Fügen Sie eine main.ts-Datei im src-Verzeichnis hinzu. Dies ist der Einstiegspunkt für das TypeScript-Programm. Kompilieren Sie den TypeScript-Code, indem Sie tsc über die Befehlszeile ausführen. Dadurch werden die JavaScript-Dateien im src-Verzeichnis generiert. Führen Sie das TypeScript-Programm aus, indem Sie node main.js über die Befehlszeile ausführen.

Unterschiede zwischen TypeScript und JavaScript

Es gibt einige wichtige Unterschiede zwischen TypeScript und anderen stark typisierten Sprachen: TypeScript ist eine Obermenge von JavaScript, was bedeutet, dass jeder gültige JavaScript-Code auch gültiger TypeScript-Code ist. Dies erleichtert die Übernahme für bestehende JavaScript-Projekte.

TypeScript verwendet ein optionales Typsystem, was bedeutet, dass Typen für Variablen angegeben werden können, aber nicht erforderlich sind. Andere stark typisierte Sprachen wie Swift und Kotlin verwenden ein obligatorisches Typsystem, das erfordert, dass alle Variablen mit einem bestimmten Typ deklariert werden.

TypeScript unterstützt Generika, die typsichere Sammlungen und andere Datenstrukturen ermöglichen. Dies ist in JavaScript nicht verfügbar.

Wann sollte ich Javascript anstelle von Typescript zum Codieren verwenden?

Es gibt keine feste Regel für die Verwendung von JavaScript oder TypeScript. Es ist Sache des Entwicklers, das richtige Werkzeug für die Aufgabe auszuwählen. Es gibt jedoch einige allgemeine Richtlinien, die befolgt werden können.

Wenn ein Projekt bereits in JavaScript geschrieben ist, ist es normalerweise am besten, weiterhin JavaScript zu verwenden. Es ist nicht erforderlich, den Code nur für die Verwendung von TypeScript in TypeScript zu konvertieren. Beachten Sie jedoch, dass die Wartung eines JavaScript-Projekts aufgrund des Fehlens eines Typsystems schwieriger sein kann, was zu versteckten Fehlern führt. Daher ist es am besten, die Übernahme von TypeScript in Betracht zu ziehen, wenn das Projekt in Zukunft gewartet (und erweitert) wird.

Wenn ein Projekt bei Null anfängt, ist es normalerweise am besten, TypeScript zu verwenden. Dies ermöglicht langfristig eine bessere Organisation und Wartung des Codes.

Einfache Beispiele

// TypeScript.
class Person {
  name: string;
  age: number;
}

const person: Person = new Person();
const person.name = "Tom";
const person.age = 42;

// JavaScript.
var Person = function() {};
Person.prototype.name = "";
Person.prototype.age = 0;

// TypeScript.
// Here's we're also using the class, but this
// time conforming to an interface, something that
// doesn't exist in JavaScript.
interface IPerson {
  name: string;
  age: number;
}

class Person implements IPerson {
  name: string;
  age: number;
}

// JavaScript.
var IPerson = function() {};
IPerson.prototype.name = "";
IPerson.prototype.age = 0;

var Person = function() {};
Person.prototype = Object.create(IPerson);

Schlussworte

TypeScript ist eine leistungsstarke Sprache, mit der Sie die Qualität Ihres Codes verbessern können. Der Einstieg ist einfach und kann auf jeder Plattform verwendet werden, die JavaScript unterstützt. Dieser Artikel gab nur eine sehr kurze Einführung, da die Sprache jetzt viel mehr Funktionen und Konzepte bietet, die es zu lernen gilt.

Unter den Links im Anhang am Ende der Seite finden Sie einige nützliche Lernmaterialien.