JavaScript ist die am weitesten verbreitete Programmiersprache für die Webentwicklung. Aber es fehlt die Unterstützung für Typenüberprüfung, was eine wesentliche Funktion moderner Programmiersprachen ist.

JavaScript wurde ursprünglich als einfache Skriptsprache konzipiert. Seine lockere Struktur und das Fehlen wichtiger objektorientierter Programmierung (OOP)-Funktionen stellen bestimmte Herausforderungen für Entwickler dar:

  1. Eingeschränkte Dokumentation und Autovervollständigung.

  2. Unfähigkeit, OOP-Konzepte zu nutzen.

  3. Fehlende Typsicherheit, was zu Laufzeitfehlern führt.

  4. Herausforderungen bei der Refaktorisierung und Wartung.

  5. Fehlen von Schnittstellen und Integrationspunkten.

TypeScript löst diese Probleme. Es wurde entwickelt, um JavaScript zu einer noch vollkommeneren modernen Programmiersprache zu machen. Es verbessert das Entwicklererlebnis, bietet viele nützliche Funktionen und verbessert die Interoperabilität.

In diesem Artikel werden die Grundlagen von TypeScript behandelt. Ich werde Ihnen zeigen, wie Sie TS installieren und ein Projekt einrichten können. Dann werden wir einige wichtige Grundlagen behandeln. Sie werden auch erfahren, wie TypeScript in JavaScript kompiliert wird, um es mit Browsern und Node.js-Umgebungen kompatibel zu machen.

Was wir behandeln werden:

Voraussetzungen

Bevor Sie sich mit TypeScript beschäftigen, ist es wichtig, ein grundlegendes Verständnis bestimmter Konzepte zu haben, um eine reibungslosere Lernerfahrung zu gewährleisten. Während TypeScript JavaScript mit statischer Typisierung und anderen leistungsstarken Funktionen erweitert, baut es auf den Kernprinzipien von JavaScript auf. Hier ist, was Sie wissen sollten:

1. JavaScript-Grundlagen

TypeScript ist eine Erweiterung von JavaScript, was bedeutet, dass es die Fähigkeiten von JavaScript erweitert. Um TypeScript effektiv zu lernen, sollten Sie zuerst ein solides Verständnis der JavaScript-Grundlagen haben, einschließlich:

  • Syntax und Datentypen: Verstehen Sie, wie man Variablen deklariert (let, const und var), mit primitiven Typen arbeitet (Zeichenfolgen, Zahlen, Booleans) und Arrays und Objekte verwaltet.

  • Steuerungsfluss: Seien Sie vertraut mit Schleifen (for, while), Bedingungen (if-else, switch) und wie sie die Programmablaufsteuerung beeinflussen.

  • Funktionen: Wissen, wie man Funktionen definiert und aufruft, mit Parametern arbeitet, Rückgabewerte verarbeitet und Konzepte wie Pfeilfunktionen und Closures versteht.

  • Objektorientierte Programmierung (OOP): Lernen Sie, wie man mit Objekten, Klassen und Vererbung arbeitet. Die klassenbasierten Funktionen von TypeScript bauen stark auf dem OOP-Modell von JavaScript auf.

  • Fehlerbehandlung: Verstehen, wie man try-catch-Blöcke verwendet, um Laufzeitfehler zu behandeln.

2. Grundlegendes HTML und CSS

Obwohl TypeScript eine Sprache ist, die hauptsächlich mit JavaScript verwendet wird, ist ein grundlegendes Verständnis von HTML und CSS hilfreich, insbesondere für Frontend-Entwickler. Dies liegt daran, dass die meisten TypeScript-Projekte das Erstellen oder Arbeiten mit Webanwendungen umfassen

  • HTML: Verstehen, wie man Webseiten mit Tags, Attributen und Elementen strukturiert.

  • CSS: Lernen Sie, wie man Elemente mit Selektoren, Eigenschaften und Werten gestaltet. Vertrautheit mit CSS-Frameworks wie Bootstrap ist von Vorteil.

3. Vertrautheit mit Entwicklungswerkzeugen

  • Ein Code-Editor wie Visual Studio Code, der eine ausgezeichnete TypeScript-Unterstützung und Erweiterungen bietet.

  • Node.js und npm: Verstehen Sie, wie man eine Entwicklungsumgebung einrichtet, JavaScript außerhalb des Browsers ausführt und npm (Node Package Manager) verwendet, um Abhängigkeiten zu installieren.

  • Versionskontrolle (Git): Lernen Sie die Grundlagen von Git, um Änderungen nachzuverfolgen und effektiv an TypeScript-Projekten zusammenzuarbeiten.

Loslegen – Wie man TypeScript installiert

Um mit TypeScript zu arbeiten, müssen Sie es installieren. Es ist kein komplizierter Prozess. Mit TypeScript installiert, können Sie seine Leistung nutzen, um hochwertige Lösungen zu erstellen.

Sie können TS auf zwei Arten installieren:

  1. Globale Installation: ermöglicht Ihnen den Zugriff auf den Compiler von jedem Verzeichnis auf Ihrem Computer aus. Um TypeScript global zu installieren, führen Sie den folgenden Befehl aus:
npm install -g typescript

Dieser Befehl nutzt den Node.js-Paketmanager npm. Es installiert TypeScript global, sodass der Befehl in der Befehlszeile verfügbar ist.

  1. Lokale Installation: in diesem Fall wird TypeScript nur innerhalb eines bestimmten Projekts installiert. Diese Methode gewährleistet eine Versionskompatibilität und Konsistenz unter Teammitgliedern. Um TypeScript lokal zu installieren, führen Sie den folgenden Befehl aus:
npm install typescript --save-dev

Im Gegensatz zur globalen Installation installiert dieser Befehl TypeScript als Entwicklungsspezifikation. Der Befehl tsc steht nur für die projektspezifische Verwendung zur Verfügung, das heißt für das spezifische Projekt, in dem Sie den Befehl ausführen.

Können Sie jetzt nahtlos TypeScript installieren? Ich hoffe doch!

Wie man seine TypeScript-Projekte organisiert

Die Organisation eines TypeScript-Projekts umfasst die Strukturierung seiner Dateien mit aussagekräftigen Namen und Verzeichnissen, die Trennung von Anliegen und die Verwendung von Modulen für Kapselung und Wiederverwendbarkeit.

Die Erweiterung .ts kennzeichnet TypeScript-Dateien und enthält Code, der in JavaScript für die Ausführung umgewandelt wird.

TypeScript unterstützt auch .d.ts Dateien, auch bekannt als Typ-Definition Dateien. Diese Dateien bieten Typinformationen über externe JavaScript-Bibliotheken oder Module, die die Typenprüfung und Code-Vervollständigung verbessern und die Entwicklungseffizienz steigern. Unten ist ein Beispiel für eine gute TS-Projektstruktur:

my-ts-project/
├── src/ 
│   ├── components/ 
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── services/ 
│   │   ├── api.ts
│   │   └── authService.ts
│   ├── utils/ 
│   │   ├── helpers.ts 
│   │   └── validators.ts
│   ├── models/ 
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── index.tsx 
│   └── styles/ 
│       ├── global.css
│       └── theme.css
├── public/ 
│   ├── index.html
│   └── assets/ 
│       ├── images/
│       └── fonts/
├── tsconfig.json
└── package.json

Lassen Sie uns verstehen, was hier passiert:

  1. src/: Dieses Verzeichnis enthält den gesamten Quellcode für das Projekt.

    • components/: Enthält wiederverwendbare UI-Komponenten (zum Beispiel, Button, Input, Modal). Die Verwendung von .tsx (TypeScript JSX) ermöglicht es Ihnen, JSX mit Typsicherheit zu schreiben.

    • services/: Enthält Dienste, die mit externen APIs interagieren oder Anwendungslogik verarbeiten (zum Beispiel, api.ts für API-Aufrufe, authService.ts für Authentifizierung).

    • utils/: Enthält Hilfsfunktionen und Hilfsklassen für häufige Aufgaben (zum Beispiel, helpers.ts für die Datumsformatierung, validators.ts für die Eingabevalidierung).

    • models/: Definiert TypeScript-Schnittstellen oder Klassen zur Repräsentation von Datenstrukturen (zum Beispiel, User.ts, Product.ts).

    • index.tsx: Der Haupt-Einstiegspunkt der Anwendung.

    • styles/: Enthält CSS oder andere Styling-Dateien.

  2. public/: Dieses Verzeichnis enthält statische Assets, die nicht von TypeScript verarbeitet werden (zum Beispiel HTML, Bilder, Schriftarten).

  3. tsconfig.json: Die TypeScript-Konfigurationsdatei, die Compileroptionen festlegt.

  4. package.json: Die Manifestdatei des Projekts, in der Abhängigkeiten, Skripte und andere Projektdaten aufgeführt sind.

Nur eine kurze Anmerkung zu Namenskonventionen, damit Sie sie hier verstehen:

  • Verwenden Sie PascalCase für Klassennamen (zum Beispiel User, Product).

  • Verwenden Sie camelCase für Funktionsnamen und Variablennamen (zum Beispiel getUser, firstName).

  • Verwenden Sie aussagekräftige und beschreibende Namen für Dateien und Verzeichnisse.

Diese Struktur fördert Modularität, Wiederverwendbarkeit und bessere Organisation, was Ihre TypeScript-Projekte einfacher zu pflegen und zu skalieren macht.

Die ordnungsgemäße Organisation Ihrer TS-Projekte verbessert die Code-Wartbarkeit, Lesbarkeit und Zusammenarbeit in den TypeScript-Entwicklungsworkflows.

Wie Typisierung in TypeScript funktioniert

Wie bei jeder anderen typisierten Programmiersprache basiert TypeScript auf Typdefinitionen, die im Allgemeinen als Typisierung bezeichnet werden.

Typisierung ist ein Begriff in der Programmierung, der Datentypen für Variablen, Methodenparameter und Rückgabewerte im Code definiert.

Die Typisierung ermöglicht es Ihnen, Fehler schnell und frühzeitig während der Entwicklung zu erkennen, was dazu beiträgt, die Code-Qualität zu verbessern.

Um in TypeScript einen Typ anzugeben, setzen Sie einen Doppelpunkt (:) und den gewünschten Datentyp hinter Ihren Variablennamen. Hier ist ein Beispiel:

let age: number = 2;

Die obige Variable ist mit dem Typ number deklariert. In TypeScript bedeutet dies, dass sie nur Zahlen speichern kann und nichts anderes.

Typisierungstechniken

In TypeScript kann Daten auf zwei Hauptarten typisiert werden:

  1. Statische Typisierung: Statische Typisierung bezieht sich auf das explizite Festlegen des Datentyps von Variablen und anderen Entitäten im Code während der Entwicklung. Der TypeScript-Compiler setzt diese Typdefinitionen durch und hilft dabei, typbezogene Fehler frühzeitig zu erkennen. Zum Beispiel:
let age: number = 25;

Hier wird die Variable age explizit als vom Typ number deklariert. Dadurch wird sichergestellt, dass nur numerische Werte zugewiesen werden können, was das Risiko von Laufzeitfehlern reduziert.

  1. Dynamisches Typing: Dynamisches Typing in TypeScript bezieht sich auf Szenarien, in denen der Typ einer Variablen zur Laufzeit bestimmt wird. Dies kann vorkommen, wenn Variablen den Typ any zugewiesen bekommen, der es ihnen ermöglicht, Werte beliebigen Typs zu halten. TypeScript führt keine Typüberprüfung bei Operationen mit Variablen vom Typ any durch.
let value: any;
value = 25; // Nummer
value = "Hello"; // Zeichenfolge

Auch wenn TypeScript primär eine statisch typisierte Sprache ist, kann dynamisches Typing in spezifischen Fällen dennoch nützlich sein, wie zum Beispiel:

  • Arbeiten mit Bibliotheken von Drittanbietern, die keine Typdefinitionen haben.

  • Interagieren mit dynamisch strukturierten Daten (zum Beispiel JSON-Antworten von APIs mit unbekannten Strukturen).

  • Schnelles Prototyping oder wenn Typinformationen während der anfänglichen Entwicklungsphase nicht verfügbar sind.

Statisch vs. Dynamisches Typing in TypeScript

Statische Typisierung ist in TypeScript erheblich verbreiteter, da sie eines der Hauptmerkmale ist, das TypeScript von JavaScript unterscheidet. Durch die Durchsetzung strenger Typprüfungen verbessert die statische Typisierung die Wartbarkeit des Codes, reduziert Fehler und steigert die Produktivität der Entwickler.

Die dynamische Typisierung ist in der Regel für Fälle reserviert, in denen Flexibilität erforderlich ist oder wenn man es mit Daten zu tun hat, deren Struktur im Voraus nicht bestimmt werden kann. Denken Sie einfach daran, dass eine starke Abhängigkeit von dynamischer Typisierung (zum Beispiel die übermäßige Verwendung des any-Typs) im Allgemeinen nicht empfohlen wird, da sie die Vorteile des statischen Typisierungssystems von TypeScript untergräbt.

Während die dynamische Typisierung also ihren Platz in bestimmten Grenzfällen hat, ist die statische Typisierung der bevorzugte und gebräuchlichere Ansatz in der TypeScript-Entwicklung.

Typinferenz und Unionstypen

Typinferenz

Die Typinferenz ist eine leistungsstarke Funktion von TypeScript, die es dem Compiler ermöglicht, den Typ einer Variablen automatisch abzuleiten, basierend auf dem Wert, der ihr während der Initialisierung zugewiesen wird. Einfacher ausgedrückt, schaut TypeScript auf den Wert, den Sie einer Variablen zuweisen, und entscheidet, welchen Typ sie haben sollte, auch wenn Sie den Typ nicht ausdrücklich deklarieren.

Zum Beispiel:

typescriptCopyEditlet age = 25; // TypeScript schlussfolgert, dass 'age' vom Typ 'number' ist
age = "hello"; // Fehler: Typ 'string' kann nicht dem Typ 'number' zugewiesen werden

In diesem Beispiel wird die age-Variable automatisch als number abgeleitet, aufgrund ihres Anfangswertes, 25. Jeder Versuch, age einen Wert eines anderen Typs (wie einen String) zuzuweisen, führt zu einem Typfehler.

Die Typableitung ist besonders nützlich, da sie die Notwendigkeit für explizite Typannotationen reduziert, wodurch Ihr Code sauberer und lesbarer wird. Dennoch bietet sie die Sicherheit und Zuverlässigkeit der Typüberprüfung von TypeScript.

Wann man Typableitung verwenden sollte:

  • Einfache Zuweisungen: Verwenden Sie die Typableitung für einfache Zuweisungen, bei denen der Typ aus dem Wert offensichtlich ist.

  • Standardwerte: Bei der Bereitstellung von Standardwerten für Variablen oder Funktionsparameter stellt die Typableitung sicher, dass der korrekte Typ angewendet wird, ohne manuelle Annotationsanforderungen.

  • Schnelles Prototyping: In den frühen Entwicklungsphasen kann die Typableitung den Boilerplate-Code reduzieren und gleichzeitig die Typensicherheit gewährleisten.

Vereinigungs-Typen

Unionstypen ermöglichen es einer Variablen, Werte mehrerer Typen zu halten. Sie werden definiert, indem ein senkrechter Strich (|) zwischen den Typen platziert wird. Diese Funktion ist besonders nützlich, wenn eine Variable während ihres Lebenszyklus legitimerweise mehr als einen Typ haben kann.

Zum Beispiel:

typescriptCopyEditlet numOrString: number | string; // 'numOrString' kann entweder eine Zahl oder einen String enthalten
numOrString = 25; // Gültig
numOrString = "hello"; // Gültig
numOrString = true; // Fehler: Typ 'boolean' ist nicht zuweisbar an Typ 'number | string'

Sogar Unionstypen mit mehr als zwei möglichen Typen können definiert werden:

typescriptCopyEditlet multiType: number | string | boolean;
multiType = 42; // Gültig
multiType = "TypeScript"; // Gültig
multiType = false; // Gültig
Wann Unionstypen verwendet werden sollten:

  • Flexible Funktionsparameter: Wenn eine Funktion mehrere Arten von Eingaben akzeptieren kann.

      typescriptCopyEditfunction printValue(value: string | number) {
    console.log(value);
  }

  • Umgang mit vielfältigen Datenstrukturen: Wenn mit APIs oder externen Datenquellen gearbeitet wird, in denen Felder in ihrem Typ variieren können.

  • Optionale oder mehrzuständige Variablen: Zum Beispiel eine Variable, die einen Ladezustand als booleschen Wert, einen Fehler als Zeichenfolge oder gültige Daten als Objekt darstellen kann:

      typescriptKopielet status: boolean | string | { Erfolg: boolean; daten: beliebig };

Wie man Objekte, Arrays und Funktionstypen in TypeScript behandelt

Um TypeScript zu beherrschen, müssen Sie die verschiedenen von TypeScript unterstützten Datentypen und deren Verwendung verstehen.

Die JavaScript-Primitivtypen wie Strings, Zahlen, Booleans und mehr definieren auch die grundlegenden Bausteine von Daten in TypeScript. Insbesondere sind Objekte, Arrays, und Funktionen entscheidend für den Aufbau robuster Anwendungen. Mit Objekten, Arrays und Funktionen können Daten besser verwaltet und effizient in der Entwicklung genutzt werden.

Objekttypen in TypeScript

Objekttypen stellen die Baupläne für die Erstellung von Objekten in TypeScript dar. Sie können Objekte verwenden, um deren Struktur zu definieren, ähnlich wie Klassen in der objektorientierten Programmierung (OOP) verwendet werden. Objekte fehlen jedoch die Verhaltensaspekte und die Kapselung, die Klassen bieten.

Um einen Objekttyp zu definieren, definieren Sie explizit den Bauplan des Objekts nach dem Doppelpunkt (:). Zum Beispiel:

// Initialisierung des Objekttyps

let student: {
    name: string;
    age: number;
    matricNumber: string | number;
 };

// Zuweisung des Objekts mit tatsächlichen Daten

student = {
    name: "Akande"
    age: 21,
    matricNumber: 21/52 + "HP" + 19,
};

Beachten Sie, dass die Eigenschaften mit einem Semikolon; anstelle eines Kommas , enden, was sie in einem tatsächlichen Objekt abschließt.

Das obige ist der Hauptweg, um ein Objekt in TypeScript zu definieren. Eine andere Möglichkeit besteht darin, Interfaces zu verwenden, auf die ich später in diesem Artikel eingehen werde.

Arraytypen in TypeScript

Arrays in TypeScript ermöglichen es Ihnen, mehrere Werte des gleichen oder verschiedener Datentypen in einer einzigen Variablen zu speichern. Sie verbessern die Sicherheit und Klarheit Ihres Codes, indem sie die Typkonsistenz über die Elemente des Arrays gewährleisten.

In TypeScript können Array-Typen auf zwei Arten definiert werden:

1. Mit dem Array<type> Modell

Diese Syntax verwendet den generischen Array Typ, wobei type den Typ der Elemente darstellt, die das Array halten kann.

typescriptCopyEditlet numbers: Array<number> = [1, 2, 3, 4, 5];
let mixedArray: Array<number | string> = [1, 2, 3, 4, 5, "Hello"];

  • numbers Beispiel: Dieses Array kann nur Zahlen enthalten. Der Versuch, einen String oder einen anderen Typ zu diesem Array hinzuzufügen, führt zu einem Typfehler.

      typescriptCopyEditnumbers.push(6); // Gültig
  numbers.push("Hello"); // Fehler: Typ 'string' ist nicht zuweisbar zu Typ 'number'

  • mixedArray Beispiel: Dieses Array verwendet einen Union-Typ (number | string), der es ermöglicht, sowohl Zahlen als auch Strings zu speichern.

      typescriptCopyEditmixedArray.push(42); // Gültig
  mixedArray.push("TypeScript"); // Gültig
  mixedArray.push(true); // Fehler: Typ 'boolean' ist nicht zuweisbar zu Typ 'number | string'

2. Verwendung des type[] Modells

Diese Syntax fügt eckige Klammern ([]) zum Typ der Elemente hinzu, die das Array halten kann.

typescriptCopyEditconst numbers: number[] = [1, 2, 3, 4, 5];
const mixedArray: (string | number)[] = [1, 2, 3, 4, 5, "Hello"];

  • numbers Beispiel: Ähnlich wie im Array<number> Beispiel kann dieses Array nur Zahlen enthalten.

      typescriptCopyEditnumbers[0] = 10; // Gültig
  numbers.push("Hi"); // Fehler: Typ 'string' kann nicht dem Typ 'number' zugewiesen werden

  • mixedArray Beispiel: Wie beim vorherigen mixedArray erlaubt dieses Array sowohl Zahlen als auch Zeichenfolgen und bietet Flexibilität, wenn der Datentyp variieren kann.

      typescriptCopyEditmixedArray[1] = "Welt"; // Gültig
  mixedArray.push(true); // Fehler: Typ 'boolean' ist nicht zuweisbar zu Typ 'string | number'

Verwendung von Arrays in TypeScript

Arrays sind vielseitig und werden häufig zum Speichern von Sammlungen verwandter Daten verwendet. Hier sind einige praktische Szenarien:

Speichern homogener Daten:
Wenn alle Elemente im Array denselben Typ teilen, wie z. B. eine Liste von Benutzer-IDs oder Produkt-Preisen:

typescriptCopyEditconst userIds: number[] = [101, 102, 103];
const productPrices: Array<number> = [29.99, 49.99, 19.99];

Speichern von heterogenen Daten:
Wenn Elemente unterschiedliche Typen haben können, wie z.B. eine Liste von Nachrichten, die Text und optionale Metadaten enthalten:

typescriptCopyEditconst messages: (string | object)[] = [
  "Welcome",
  { type: "error", text: "Something went wrong" },
];

Schleifen über Arrays:
Arrays in TypeScript können in Schleifen mit voller Typsicherheit verwendet werden:

typescriptCopyEditconst scores: number[] = [80, 90, 70];
scores.forEach((score) => console.log(score + 5)); // Fügt jedem Wert 5 hinzu

Funktionsparameter und Rückgabetypen:
Arrays können auch als Funktionsparameter übergeben oder von Funktionen mit strenger Typisierung zurückgegeben werden:

typescriptCopyEditfunction getNumbers(): number[] {
  return [1, 2, 3];
}
function printStrings(strings: string[]): void {
  strings.forEach((str) => console.log(str));
}

Funktionstypen in TypeScript

Funktionstypen in TypeScript beschreiben die Form von Funktionen, einschließlich der Parametertypen und Rückgabetypen. Funktionstypen werden definiert, indem die Parametertypen bei der Deklaration explizit angegeben werden. Der Rückgabetyp wird durch Hinzufügen von : und des Typs, der unmittelbar nach den Klammern zurückgegeben werden soll, angegeben. Zum Beispiel:

function addition (a: number, b: number): number {
return a + b;
}

Die obige Funktion nimmt zwei Zahlen entgegen, addiert sie und gibt eine Zahl zurück. Die Funktion wird nicht funktionieren, wenn eines ihrer Argumente keine Zahlen sind und wenn sie etwas anderes als eine Zahl zurückgibt. Zum Beispiel:

  1. Aufruf der Funktion mit einem String als Argument:
// Das wird nicht funktionieren, weil es Zahlen erwartet und eines der Argumente ein String ist

addition(1, "two");
  1. Umformulierung der Funktion, um einen String zurückzugeben:
// Funktion wird einen Fehler zurückgeben, weil sie einen String zurückgibt

function addition (a: number, b: number): string {
    let result = a + b;
    let returnStatement = `Addition of ${a} and ${b} is: ${result}`;
    return returnStatement;
}

Testen Sie den Code selbst, um zu sehen, wie diese Beispiele funktionieren.

Das Verständnis und die effektive Handhabung von Objekten, Arrays und Funktionen in TypeScript ermöglichen es Ihnen, typsicheren und wartbaren Code zu schreiben, was die Zuverlässigkeit und Skalierbarkeit Ihrer Anwendungen verbessert.

Wie man benutzerdefinierte Typen in TypeScript erstellt

Oft entspricht Ihr Entwurfsmuster nicht den integrierten Datentypen in TypeScript. Zum Beispiel können Sie Muster haben, die dynamische Programmierung verwenden. Dies kann Probleme in Ihrem Code verursachen. TypeScript bietet eine Lösung zur Erstellung von benutzerdefinierten Typen, um dieses Problem anzugehen.

Benutzerdefinierte Typen ermöglichen es Ihnen, Ihre Datenstruktur und -formen entsprechend Ihren Anforderungen zu definieren. Dies verbessert die Lesbarkeit und Wartbarkeit des Codes.

Das Schlüsselwort „Type“

Das Schlüsselwort type ermöglicht es Ihnen, Typaliase zu erstellen, die eine Möglichkeit bieten, benutzerdefinierte Typen zu erstellen. Die von Ihnen erstellten Typen können in Ihrem gesamten Code wiederverwendet werden. Typaliase helfen dabei, Unionstypen zu definieren oder Typen in einzelne Aliase zu kombinieren. Die Syntax zur Erstellung eines benutzerdefinierten Typs lautet wie folgt:

// Syntax

type TypeAlias = type;

Und hier ist ein Beispiel:

Der obige Code erstellt einen benutzerdefinierten Typ UserName, eine Union von Zahlen und Strings. Er verwendet den erstellten Typ, um zwei Variablen zu definieren, um zu überprüfen, ob der Typ funktioniert.

Beachten Sie, dass es empfohlen wird, einen Typalias mit einem Großbuchstaben zu beginnen.

Das Schlüsselwort „Type“ wird im Allgemeinen für Primitive verwendet – aber wie erstellt man einen benutzerdefinierten Objekttyp?

Hier kommen Interfaces ins Spiel.

TypeScript-Schnittstellen

Schnittstellen in TypeScript werden verwendet, um die Struktur von Objekten zu definieren. Sie dienen als Baupläne, die die Eigenschaften eines Objekts und ihre jeweiligen Typen festlegen. Dies gewährleistet, dass Objekte einer konsistenten Struktur entsprechen, was die Typsicherheit und den Code klarer macht.

Definition einer Schnittstelle

Eine Schnittstelle wird mit dem Schlüsselwort interface definiert. Die Syntax sieht so aus:

typescriptCopyEditinterface InterfaceName {
  property1: Type;
  property2: Type;
}

Beispiel:

typescriptCopyEditinterface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

Das passiert in diesem Beispiel:

  1. Schnittstellendeklaration (interface User):

    • Hier definieren wir einen Bauplan für ein User-Objekt. Es legt fest, dass jedes Objekt vom Typ User die folgenden Eigenschaften haben muss:

      • id vom Typ number

      • name vom Typ string

      • email vom Typ string

  2. Verwendung der Schnittstelle (const user: Benutzer):

    • Wir deklarieren ein Objekt user vom Typ Benutzer.

    • Das Objekt muss alle in der Schnittstelle Benutzer definierten Eigenschaften mit Werten der angegebenen Typen haben. Wenn eine Eigenschaft fehlt oder ihr Typ nicht übereinstimmt, wird TypeScript einen Kompilierungsfehler ausgeben.

Zum Beispiel:

    typescriptCopyEditconst invalidUser: User = {
      id: 1,
      name: "Alice",
      // Fehler: Eigenschaft 'Email' fehlt im Typ
    };

Vielleicht fragen Sie sich – warum sollten Sie Schnittstellen verwenden?

  • Typsicherheit: Stellt sicher, dass Objekte der erwarteten Struktur entsprechen und Laufzeitfehler verhindert werden.

  • Wiederverwendbarkeit: Die gleiche Schnittstelle kann in verschiedenen Teilen der Anwendung wiederverwendet werden und reduziert somit die Duplizierung.

  • Codeklarheit: Macht den Code durch die explizite Beschreibung der Objektform leichter lesbar und verständlich.

Erweiterte Funktionen von Schnittstellen

  1. Optionale Eigenschaften: Sie können Eigenschaften optional machen, indem Sie ein Fragezeichen (?) hinzufügen.

     typescriptKopieBearbeiteninterface Produkt {
   id: number;
   name: string;
   beschreibung?: string; // Optionale Eigenschaft
 }

 const produkt: Produkt = {
   id: 101,
   name: "Laptop",
 }; // Gültig, da 'beschreibung' optional ist

  2. Schreibgeschützte Eigenschaften: Verwenden Sie readonly, um zu verhindern, dass Eigenschaften nach der Initialisierung geändert werden.

     typescriptCopyEditinterface Punkt {
   readonly x: number;
   readonly y: number;
 }

 const punkt: Punkt = { x: 10, y: 20 };
 punkt.x = 15; // Fehler: Kann 'x' nicht zuweisen, da es eine schreibgeschützte Eigenschaft ist

  3. Schnittstellen erweitern: Schnittstellen können Eigenschaften von anderen Schnittstellen erben, was Komposition ermöglicht.

     typescriptCopyEditinterface Person {
   name: string;
   age: number;
 }

 interface Employee extends Person {
   employeeId: number;
 }

 const employee: Employee = {
   name: "John",
   age: 30,
   employeeId: 1234,
 };

Wann Interfaces verwenden

Es gibt verschiedene Szenarien, in denen es eine gute Idee ist, Interfaces zu verwenden. Sie können sie verwenden, wenn Sie die Struktur von Objekten definieren und erzwingen möchten, die in Ihrem Code übergeben werden.

Sie sind auch nützlich in API-Antworten, da sie Ihnen helfen, Objekte zu überprüfen, die von APIs empfangen werden. Dadurch wird sichergestellt, dass die Daten Ihren Erwartungen entsprechen.

Interfaces sind auch praktisch, wenn Sie mit wiederverwendbaren Typen arbeiten. Wenn mehrere Teile Ihrer Anwendung Objekte mit der gleichen Struktur verwenden, verhindern Interfaces die Duplizierung.

Indem Sie Interfaces nutzen, können Sie robuste, wartbare und typsichere Anwendungen erstellen. Sie sind ein wesentliches Merkmal von TypeScript, das sauberen und vorhersehbaren Code fördert.

Generics und Literal Types

Generics in TypeScript ermöglichen es Ihnen, wiederverwendbare Komponenten zu erstellen, die mit verschiedenen Datentypen arbeiten können. Sie ermöglichen es Ihnen, Funktionen, Klassen und Interfaces zu schreiben, ohne den genauen Typ im Voraus festzulegen, was Ihren Code flexibler und wartbarer macht.

Hier ist ein Beispiel für eine generische Funktion und ein generisches Interface in TypeScript:

// Generisches Interface für eine Box, die jeden Wert halten kann 

interface  Box<T> { 
    value: T; 
}

// Verwendungsbeispiele

let  numberBox: Box<number> = { value: 10 };
let  stringBox: Box<string> = { value: "TypeScript" };

console.log(numberBox.value); // Ausgabe: 10 
console.log(stringBox.value); // Ausgabe: TypeScript

Sie können Generics verwenden, wenn Sie Ihren Datentyp unsicher sind.

Im Gegensatz zu Generics ermöglichen Literaltypen die genaue Angabe der Werte, die eine Variable halten kann. Dies erhöht die Spezifität und Typsicherheit Ihres Codes, verhindert das Zuweisen unbeabsichtigter Werte. Hier ist ein Beispiel:

type Direction = 'up' | 'down' | 'left' | 'right';

Eine mit obigem Typ erstellte Variable kann nur den Werten up, down, left und right zugewiesen werden.

Insgesamt ermöglicht es die Verwendung benutzerdefinierter Typen in TypeScript, ausdrucksstarke, wiederverwendbare und typsichere Datenstrukturen zu erstellen, was zur Entwicklung robusterer und wartbarer Anwendungen beiträgt.

Wie man Typen in TypeScript fusioniert

Das Zusammenführen von Typen in TypeScript kombiniert mehrere Typdeklarationen zu einem einzigen, vereinheitlichten Typ. Diese Funktion ermöglicht es Entwicklern, komplexe Typen aus kleineren, wiederverwendbaren Elementen zu erstellen, was die Codeklarheit, Wiederverwendbarkeit und Wartbarkeit verbessert.

1. Deklarationsfusion in Schnittstellen

TypeScript unterstützt die Deklarationsfusion, bei der mehrere Schnittstellendeklarationen mit demselben Namen automatisch zu einer einzigen Schnittstelle kombiniert werden. Dadurch können Sie eine vorhandene Schnittstelle durch die Definition zusätzlicher Eigenschaften oder Methoden erweitern.

Beispiel:
typescriptCopyEditinterface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};
Wie es funktioniert:

  • Die Schnittstelle User wird zweimal deklariert, jeweils mit unterschiedlichen Eigenschaften.

  • TypeScript fusioniert diese Deklarationen automatisch zu einer einzelnen Schnittstelle:

      typescriptCopyEditinterface User {
    id: number;
    name: string;
    email: string;
  }

  • Beim Erstellen des user-Objekts müssen alle Eigenschaften der fusionierten Schnittstelle vorhanden sein. Wenn eine Eigenschaft fehlt, wird TypeScript einen Fehler melden.

Deklarationsfusion ist besonders nützlich bei der Arbeit mit Bibliotheken von Drittanbietern. Sie können eine vorhandene Schnittstelle erweitern oder neue Eigenschaften hinzufügen, ohne den Quellcode der Bibliothek zu ändern.

2. Schnittstellenfusion unter Verwendung des extends Schlüsselworts

Das Schlüsselwort extends ermöglicht es einer Schnittstelle, Eigenschaften und Methoden von einer anderen zu erben und eine neue Schnittstelle zu erstellen, die die Eigenschaften beider kombiniert.

Beispiel:
typescriptCopyEditinterface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 101,
};
Wie es funktioniert:

  • Die Schnittstelle Person definiert zwei Eigenschaften: Name und Alter.

  • Die Schnittstelle Employee verwendet das Schlüsselwort extends, um die Eigenschaften von Person zu erben.

  • Die Schnittstelle Employee fügt auch eine neue Eigenschaft, employeeId, hinzu.

  • Das Objekt employee muss alle Eigenschaften sowohl von Person als auch von Employee enthalten.

Dieser Ansatz ist ideal für hierarchische Beziehungen. Zum Beispiel können Sie eine Basisschnittstelle für gemeinsame Eigenschaften definieren und sie für spezialisierte Typen erweitern.

3. Typverschmelzung unter Verwendung des & Operators

Der & Operator, bekannt als der Schnittmengentyp, ermöglicht es Ihnen, mehrere Typen in einen einzigen Typ zu kombinieren. Der resultierende Typ enthält alle Eigenschaften und Methoden von jedem Typ.

Beispiel:
typescriptCopyEdittype Address = {
  city: string;
  country: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type EmployeeDetails = Address & ContactInfo;

const employee: EmployeeDetails = {
  city: "New York",
  country: "USA",
  email: "[email protected]",
  phone: "123-456-7890",
};
Wie es funktioniert:

  • Adresse und Kontaktinformationen sind zwei separate Typen.

  • Mitarbeiterdetails ist ein Schnittstellentyp, der mit Adresse & Kontaktinformationen erstellt wurde.

  • Das Mitarbeiter-Objekt muss alle Eigenschaften von sowohl Adresse als auch Kontaktinformationen enthalten. Fehlende oder falsch typisierte Eigenschaften führen zu einem TypeScript-Fehler.

Schnittstellentypen sind hilfreich, wenn Sie nicht zusammenhängende Typen kombinieren oder zusammengesetzte Typen für spezifische Anwendungsfälle erstellen müssen, z. B. API-Antworten, die unterschiedliche Datenstrukturen zusammenführen.

Wann man welche dieser Ansätze verwenden sollte

  1. Deklarationsfusion: Verwenden Sie dies, wenn Sie eine bestehende Schnittstelle erweitern oder ergänzen möchten, insbesondere in Drittanbieterbibliotheken oder gemeinsam genutzten Codebasen.

  2. erweitert Schlüsselwort: Verwenden Sie dies für hierarchische Beziehungen, bei denen eine Basisschnittstelle in spezifischere Typen spezialisiert werden kann.

  3. Intersectionstypen (&): Verwenden Sie sie, wenn Sie mehrere nicht zusammenhängende Typen für spezifische Anwendungsfälle in einen einzigen Typ kombinieren müssen.

Indem Sie diese Zusammenführungstechniken und ihre Auswirkungen verstehen, können Sie Ihren TypeScript-Code effektiv strukturieren, die Wiederverwendbarkeit und Wartbarkeit verbessern und gleichzeitig die Typsicherheit beibehalten.

Bündelung und Transformationen in TypeScript

Nicht jeder Browser unterstützt das von TypeScript verwendete neueste JavaScript. Daher können Sie den TypeScript-Compiler oder tsc verwenden, um TypeScript-Code (.ts-Dateien) in herkömmliches JavaScript (.js-Dateien) umzuwandeln, das mit allen Browsern kompatibel ist. tsc übersetzt TypeScript-spezifische Elemente wie Typen und Klassen in JavaScript-Code, den Browser interpretieren können.

Um TypeScript-Dateien auszuführen, ist tsc das Mittel der Wahl. Sie können tsc mit npm installieren und dann Ihre .ts-Dateien in .js-Dateien umwandeln. Um tsc zu verwenden, geben Sie einfach den Namen der TypeScript-Datei vor dem tsc-Befehl an. Wenn Sie beispielsweise eine Datei namens app.ts haben, können Sie sie durch Eingabe von ausführen:

tsc app.ts

Webpack oder Parcel werden häufig verwendet, um TypeScript-Code in Browser bereitzustellen. Diese Tools bündeln alle JavaScript-Dateien, einschließlich derer von TypeScript, für eine verbesserte Leistung und eine einfachere Website-Implementierung. Sie optimieren auch das Laden des Codes, indem sie seine Größe reduzieren und die Browsergeschwindigkeit verbessern.

Die Verbesserung von Code mit TypeScript

Die Verwendung von TypeScript als JavaScript-Entwickler eröffnet Möglichkeiten für das Schreiben von robusterem und wartungsfreundlicherem Code. Durch das Verständnis der Grundlagen und Kernkonzepte, die in diesem Leitfaden dargelegt sind, können Sie das statische Typisierungssystem von TypeScript nutzen, um Fehler frühzeitig in der Entwicklung zu erkennen, was zu weniger Fehlern und einer reibungsloseren Code-Wartung führt.

Indem JavaScript-Entwickler TypeScript verwenden, können sie die Qualität und Produktivität ihres Codes verbessern. Wenn Sie weiterhin mit TypeScript erkunden und üben, werden Sie noch leistungsstärkere Funktionen und Möglichkeiten entdecken.

Setzen Sie Ihre Grenzen immer wieder neu und tauchen Sie tiefer in die Welt von TypeScript ein. 😉