TypeScript - Typen: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftiger Codingsuperstar! Heute tauchen wir in die faszinierende Welt der TypeScript-Typen ein. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide auf dieser aufregenden Reise sein. Am Ende dieses Tutorials wirst du erstaunt sein, wie viel du gelernt hast. Also, los geht's!

Was sind Typen in TypeScript?

Bevor wir ins tiefere Wasser springen, lassen wir unsまず darüber unterhalten, was Typen sind und warum sie wichtig sind. Stell dir Typen als Etiketten vor, die wir auf unsere Daten kleben. Genau wie wir unseren Schrank mit verschiedenen Abteilungen für Hemden, Hosen und Schuhe organisieren, helfen uns Typen, unseren Code zu organisieren und zu verhindern, dass wir metaphorisch einen Socken in die Hemdenabteilung stecken!

TypeScript ist eine Obermenge von JavaScript, die optionale statische Typisierung hinzufügt. Das bedeutet, wir können TypeScript genau mitteilen, welche Art von Daten wir verwenden, was uns hilft, Fehler zu erkennen, bevor unser Code überhaupt läuft. Es ist wie ein hilfreicher Freund, der über deine Schulter schaut und potenzielle Fehler vorhersagt, bevor du sie machst.

Der Any-Typ: Die Wildkarte von TypeScript

Lassen wir mit dem flexibelsten Typ in TypeScript beginnen: any. Es ist wie der Joker im Kartenspiel – er kann alles sein!

let meineVariable: any = 42;
meineVariable = "Hallo, Welt!";
meineVariable = true;

In diesem Beispiel kann meineVariable eine Zahl, dann eine Zeichenkette und dann ein Boolean sein. Es ist sehr flexibel, aber mit großer Macht kommt große Verantwortung. Die Verwendung von any zu oft widerlegt den Zweck der Verwendung von TypeScript,also verwende es sparsam!

Eingebaute Typen: Die Bausteine von TypeScript

TypeScript bringt mehrere eingebaute Typen mit, die die meisten unserer Bedürfnisse abdecken. Lassen wir sie einzeln untersuchen:

1. Number

let alter: number = 30;
let preis: number = 9.99;

Zahlen in TypeScript können Ganzzahlen oder Fließkommawerte sein. Es gibt keine Notwendigkeit, sich um verschiedene Zahlentypen wie in anderen Sprachen zu kümmern!

2. String

let name: string = "Alice";
let begrüßung: string = `Hallo, ${name}!`;

Zeichenketten können mit einfachen Anführungszeichen, doppelten Anführungszeichen oder Backticks definiert werden. Backticks erlauben es uns, Ausdrücke mit ${} einzubetten.

3. Boolean

let istStudent: boolean = true;
let hatPrüfungBestanden: boolean = false;

Booleans sind einfach – sie sind entweder true oder false. Stell dir sie als Ja/Nein-Fragen für deinen Code vor.

4. Array

let zahlen: number[] = [1, 2, 3, 4, 5];
let früchte: Array<string> = ["Apfel", "Banane", "Orange"];

Arrays können mehrere Werte desselben Typs enthalten. Wir können sie mit eckigen Klammern oder der Syntax Array<T> definieren.

5. Tuple

let person: [string, number] = ["Alice", 30];

Tupel sind Arrays mit einer festen Anzahl von Elementen, wobei jedes Element einen anderen Typ haben kann. Sie sind wie eine kleine, organisierte Box mit spezifischen Fächern für jedes Element.

6. Enum

enum Farbe {
Rot,
Grün,
Blau
}
let lieblingsFarbe: Farbe = Farbe.Blau;

Enums erlauben es uns, einen Satz benannter Konstanten zu definieren. Sie sind großartig, um eine festgelegte Gruppe von Optionen darzustellen.

7. Void

function logMessage(nachricht: string): void {
console.log(nachricht);
}

Void wird verwendet, um anzuzeigen, dass eine Funktion nichts zurückgibt. Es ist wie ein Brief, der ohne Erwartung einer Antwort gesendet wird.

8. Null und Undefined

let nichtDefiniert: undefined = undefined;
let leer: null = null;

Diese Typen repräsentieren das Fehlen eines Wertes. Sie sind wie leere Kisten – eine, die absichtlich leer ist (null), und eine, die noch nicht gefüllt wurde (undefined).

Hier ist eine Tabelle, die die eingebauten Typen zusammenfasst, die wir besprochen haben:

Typ	Beschreibung	Beispiel
number	Numerische Werte (Ganzzahl oder Fließkommawert)	let alter: number = 30;
string	Textuelle Daten	let name: string = "Alice";
boolean	True oder false Werte	let istStudent: boolean = true;
array	Sammlung von Werten desselben Art	let zahlen: number[] = [1, 2, 3];
tuple	Festlängige Array mit spezifischen Typen	let person: [string, number] = ["Alice", 30];
enum	Satz benannter Konstanten	enum Farbe { Rot, Grün, Blau }
void	Fehlen eines Rückgabewertes in Funktionen	function logMessage(nachricht: string): void { ... }
null	Absichtliche Abwesenheit eines Objektwertes	let leer: null = null;
undefined	Variable, die keinen Wert zugewiesen bekommen hat	let nichtDefiniert: undefined = undefined;

Benutzedefinierte Typen: Eigenes Werkzeug schaffen

Nun, da wir die eingebauten Typen behandelt haben, lassen wir uns darüber unterhalten, wie du deine eigenen benutzerdefinierten Typen erstellen kannst. Dies ist der Punkt, an dem TypeScript wirklich strahlt!

1. Schnittstellen

Schnittstellen erlauben es uns, die Struktur eines Objekts zu definieren. Stell dir sie als.Blueprints für Objekte vor.

interface Person {
name: string;
alter: number;
greet(): void;
}

let alice: Person = {
name: "Alice",
alter: 30,
greet() {
console.log(`Hallo, mein Name ist ${this.name}`);
}
};

In diesem Beispiel haben wir eine Person-Schnittstelle definiert und ein Objekt erstellt, das dieser Struktur folgt. Es ist wie das Erstellen eines Formulars, das Menschen ausfüllen müssen – alle müssen die gleichen Informationen bereitstellen.

2. Klassen

Klassen sind eine Möglichkeit, wiederverwendbare Komponenten zu erstellen. Sie sind wie Ausstechformen – du definierst die Form einmal und kannst dann so viele Kekse (Objekte) wie du willst herstellen!

class Student {
name: string;
note: number;

constructor(name: string, note: number) {
this.name = name;
this.note = note;
}

lernen() {
console.log(`${this.name} lernt fleißig!`);
}
}

let bob = new Student("Bob", 10);
bob.lernen(); // Ausgabe: "Bob lernt fleißig!"

Hier haben wir eine Student-Klasse mit Eigenschaften (name und note) und einer Methode (lernen) erstellt. Wir können so viele Schüler wie wir wollen mit dieser Klasse erstellen.

3. Typen Aliase

Typen Aliase erlauben es uns, neue Namen für Typen zu erstellen. Sie sind nützlich für die Erstellung komplexer Typen oder für die Vergabe bedeutsamerer Namen für bestehende Typen.

type Punkt = {
x: number;
y: number;
};

let mitte: Punkt = { x: 0, y: 0 };

In diesem Beispiel haben wir einen Punkt-Typ erstellt, der einen Punkt im 2D-Raum darstellt. Es ist eine einfache Möglichkeit, verwandte Eigenschaften zusammenzufassen.

4. Unionstypen

Unionstypen erlauben es einem Wert, einen von mehreren Typen zu sein. Es ist wie zu sagen: "Dies kann entweder dies oder das sein."

type Ergebnis = number | string;

function getErgebnis(wert: boolean): Ergebnis {
return wert ? "Erfolg" : 404;
}

Hier kann Ergebnis entweder eine Zahl oder eine Zeichenkette sein. Dies ist nützlich, wenn ein Wert je nach bestimmten Bedingungen einen anderen Typ haben kann.

5. Schnittpunkttypen

Schnittpunkttypen kombinieren mehrere Typen in einen. Es ist wie zu sagen: "Dies muss dies UND das sein."

interface Farbiger {
farbe: string;
}

interface Kreis {
radius: number;
}

type FarbigerKreis = Farbiger & Kreis;

let meinKreis: FarbigerKreis = {
farbe: "rot",
radius: 5
};

In diesem Beispiel ist FarbigerKreis sowohl Farbiger als auch ein Kreis. Er muss sowohl eine farbe als auch einen radius haben.

Und das war's! Wir haben die Grundlagen der TypeScript-Typen behandelt, von der flexiblen any-Art bis hin zu eingebauten Typen und benutzerdefinierten Typen. Denke daran, Typen in TypeScript sind wie deine Codingsuperkräfte – sie helfen dir, saubereren und zuverlässigeren Code zu schreiben und Fehler zu erkennen, bevor sie zu Problemen werden.

While du deine TypeScript-Reise fortsetzt, experimentiere weiterhin mit diesen Typen. Versuche, sie auf verschiedene Weise zu kombinieren, und habe keine Angst, Fehler zu machen – das ist, wie wir lernen! Vor dir weißt du es, du wirst wie ein Profi tippen und robusten, fehlerfreien Code erstellen.

Frohes Coden und möge deine Typen immer stark sein!

Credits: Image by storyset