TypeScript fügt JavaScript die dringend benötigte Typisierung hinzu und hilft Entwicklern, sicherere und verständlichere Codebasen zu erstellen. Wenn ihr von JavaScript zu TypeScript wechselt, werdet ihr einige neue Konzepte kennenlernen müssen. Dieser Artikel führt euch durch die Grundlagen von TypeScript, damit ihr schnell loslegen könnt.
Variablentypen
Der vielleicht größte Vorteil von TypeScript ist die Fähigkeit, Variablen explizite Typen zuzuweisen. Diese Typen werden zur Kompilierzeit überprüft, was bedeutet, dass viele Fehler erkannt werden, bevor der Code überhaupt ausgeführt wird. Hier ein einfaches Beispiel:
let message: string = "Hello, TypeScript";
let count: number = 10;
let isActive: boolean = false;Funktionstypisierung
In TypeScript könnt ihr nicht nur Variablen, sondern auch Funktionen Typen zuweisen. Ihr könnt sowohl den Typen der Argumente als auch den Typen des Rückgabewerts definieren:
function add(x: number, y: number): number {
return x + y;
}Interfaces
Interfaces sind ein mächtiges Feature von TypeScript, das euch erlaubt, die Form von Objekten zu definieren. Sie sind besonders nützlich, um sicherzustellen, dass bestimmte Objekte immer bestimmte Eigenschaften haben:
interface User {
name: string;
age: number;
}
const user: User = {
name: "Max Mustermann",
age: 28
};Klassen und Vererbung
TypeScript unterstützt Klassen und Vererbung, ähnlich wie andere objektorientierte Sprachen. Dies ermöglicht es euch, euren Code in einer strukturierten Weise zu organisieren:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}Generics
Generics sind eine Möglichkeit, Komponenten zu erstellen, die mit verschiedenen Typen arbeiten können, ohne dabei den spezifischen Typ anzugeben. Sie geben euch Flexibilität sowie Typsicherheit:
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");Typinferenz und Union-Typen
TypeScript ist intelligent genug, um in vielen Fällen Typen selbst zu erkennen (Typinferenz). Außerdem könnt ihr Union-Typen nutzen, um eine Variable zu definieren, die mehr als einen Typ annehmen kann:
let uncertain: string | number;
uncertain = "Maybe a string?";
uncertain = 42; // Auch okay!Fazit
Diese Grundlagen sind der erste Schritt, um TypeScript effektiv in euren Projekten einzusetzen. Durch das Erlernen dieser Konzepte werdet ihr in der Lage sein, Anwendungen zu schreiben, die nicht nur leistungsfähig, sondern auch einfacher zu warten und zu debuggen sind. Mit diesen Werkzeugen ausgestattet, könnt ihr beginnen, die tieferen, fortgeschritteneren Teile von TypeScript zu erkunden.