Novus Tec← Alle Artikel

Webentwicklung3 Min.

TypeScript-Typen: Grundtypen und erweiterte Typen

In TypeScript spielt die Typisierung eine zentrale Rolle. Durch die Definition von Typen kann sichergestellt werden, dass der Code zur Entwicklungszeit auf Fehler überprüft wird, was die Stabilität und Wartbarkeit des Codes erhöht. In diesem Artikel gehen wir auf die verschiedenen Typen ein, die TypeScript bietet, von den einfachen primitiven Datentypen bis hin zu den fortgeschrittenen Typen wie Union und Intersection Types.

Primitive Datentypen (string, number, boolean)

Die primitivsten Datentypen in TypeScript sind die gleichen wie in JavaScript: `string`, `number` und `boolean`. Diese Datentypen repräsentieren grundlegende Werte und werden in den meisten Anwendungen häufig verwendet.

string: Repräsentiert Textwerte. Strings werden in einfachen (`’text’`) oder doppelten (`“text“`) Anführungszeichen verwendet.

  let message: string = "Hello, TypeScript!";

number: Repräsentiert sowohl Ganzzahlen als auch Gleitkommazahlen. In TypeScript gibt es keinen Unterschied zwischen Ganzzahlen und Dezimalzahlen.

let count: number = 42;
let pi: number = 3.14;

boolean: Repräsentiert logische Wahrheitswerte, entweder `true` oder `false`.

let isActive: boolean = true;

Arrays, Tuples und Enums

Neben den primitiven Typen bietet TypeScript auch komplexere Datentypen wie Arrays, Tuples und Enums, um strukturierte Daten zu speichern.

Arrays: Arrays in TypeScript können Werte eines bestimmten Typs oder gemischte Typen enthalten. Der Typ eines Arrays wird durch den Typ der enthaltenen Elemente definiert, gefolgt von `[]`.

let numbers: number[] = [1, 2, 3, 4];
let strings: string[] = ["apple", "banana", "cherry"];

Alternativ kann das `Array<T>`-Syntax verwendet werden:

let mixedArray: Array<string | number> = [1, "two", 3, "four"];

Tuples: Tuples sind Arrays mit einer festen Länge und festgelegten Typen für jedes Element. Sie ermöglichen es, eine Sammlung von Werten mit unterschiedlichen Typen zu speichern.

let tuple: [string, number, boolean] = ["TypeScript", 2024, true];

Enums: Enums ermöglichen es, eine Gruppe von benannten Konstanten zu definieren. Sie können entweder automatisch nummeriert oder explizit Werte zugeordnet bekommen.

enum Color {
  Red,    // 0
  Green,  // 1
  Blue    // 2
}
let myColor: Color = Color.Green;

Man kann auch explizit Startwerte zuweisen:

enum Status {
  Success = 200,
  NotFound = 404,
  ServerError = 500
}
let statusCode: Status = Status.NotFound;

Union und Intersection Types

Ein Union-Typ erlaubt es einer Variable, mehr als einen Typ anzunehmen. Mit dem `|`-Operator kann festgelegt werden, dass eine Variable z. B. entweder eine Zahl oder ein String sein kann.

let id: string | number;
id = 123;      // okay
id = "ABC123"; // auch okay

Mit dem `&`-Operator können Intersection Types verwendet werden, um eine Kombination von Typen zu definieren. Das bedeutet, dass ein Wert alle Typen erfüllen muss.

  interface Person {
    name: string;
  }

  interface Employee {
    employeeId: number;
  }

  type Worker = Person & Employee;
  let worker: Worker = {
    name: "Philipp",
    employeeId: 1234
  };

Type Aliases und Literal Types

Mit Type Aliases kann man benutzerdefinierte Typen definieren, um komplexere Typen lesbarer und wiederverwendbarer zu machen.

  type ID = string | number;
  let userId: ID;
  userId = 101;    // okay
  userId = "102";  // auch okay

Type Aliases sind besonders nützlich, wenn man mehrere komplexe Typen immer wieder verwendet und den Code besser strukturiert halten möchte.

Literal Types erlauben es, Variablen auf einen bestimmten Wert oder eine enge Menge von Werten zu beschränken.

  type Status = "success" | "error" | "loading";
  let currentStatus: Status;
  currentStatus = "success";  // okay
  currentStatus = "error";    // okay
  currentStatus = "pending";  // Fehler, da "pending" nicht zum Literal Type gehört

Diese Funktion ist besonders nützlich, wenn nur eine bestimmte Anzahl von gültigen Optionen für eine Variable zugelassen ist.

Fazit

Die Typen in TypeScript bieten eine umfassende und flexible Möglichkeit, Daten in einem Programm zu beschreiben und Fehler bereits zur Entwicklungszeit zu verhindern. Die primitive Typen bieten eine solide Grundlage, während Arrays, Tuples und Enums helfen, strukturierte Daten effizient zu organisieren. Union und Intersection Types bieten Flexibilität und Präzision, während Type Aliases und Literal Types den Code lesbarer und wartbarer machen. TypeScript gibt Entwicklern durch diese vielseitigen Typisierungswerkzeuge die Möglichkeit, sauberen und verlässlichen Code zu schreiben, der auch in großen Projekten langfristig stabil bleibt.

Weiterlesen

Webentwicklung5 Min.Angular-Module und Lazy Loading: Optimierung durch eine modulare ArchitekturDie modulare Architektur von Angular ist ein zentraler Aspekt des Frameworks, der es Entwicklern ermöglicht, große Anwendungen in handhabbare, wiederverwendbare Teile zu zerlegen. Mit Lazy Loading lässt sich die Ladezeit von Angular-Anwendungen erheblich optimieren, indem nicht benötigte Module …Webentwicklung4 Min.Einrichten eines Angular-ProjektsWenn du planst, eine Webanwendung mit Angular zu erstellen, ist es wichtig, von Anfang an eine solide Entwicklungsumgebung einzurichten. In diesem Artikel zeigen wir dir, wie du Schritt für Schritt ein neues Angular-Projekt aufsetzt und welche Tools dir dabei helfen. Voraussetzungen für Angular …Webentwicklung1 Min.Entdecke die Welt von AngularIn der schnelllebigen Welt der Webentwicklung ist es entscheidend, ein Framework zu wählen, das nicht nur leistungsfähig und flexibel ist, sondern auch die Produktivität steigert und die Wartung erleichtert. Angular, entwickelt und ständig erweitert von Google, steht als eines der führenden …