Code-Bibliothek — Capypad · Code Zeile für Zeile lesen

TypeScript · MittelSnippet

Mapped Types

Mapped Types ermöglichen es, neue Typen basierend auf den Eigenschaften eines existierenden Typs zu erstellen. Sie sind essenziell, um Objektstrukturen dynamisch zu transformieren.

snippet.ts

typescript

1

2

3

type Optional<T> = {
  [P in keyof T]?: T[P];
};

syntaxbestpractices

TypeScript · MittelSnippet

Intersection Types (Schnittmengen-Typen)

Intersection Types kombinieren mehrere Typen zu einem. Sie erlauben das Zusammenführen existierender Typen zu einem Typ, der alle benötigten Eigenschaften besitzt.

snippet.ts

typescript

1

2

3

4

5

6

7

8

9

type Admin = { privileges: string[] };
type User = { name: string };
 
type SuperUser = Admin & User;
 
const boss: SuperUser = {
  name: "Alice",
  privileges: ["all"]
};

syntaxdatatypes

TypeScript · MittelSnippet

Discriminated Unions (Unterscheidbare Unions)

Discriminated Unions nutzen eine gemeinsame Literal-Eigenschaft (den Diskriminator), um TypeScript das sichere Eingrenzen von Union-Mitgliedern zu ermöglichen.

snippet.ts

typescript

1

2

3

4

5

6

7

8

9

interface Circle { kind: "circle"; radius: number; }
interface Square { kind: "square"; side: number; }
 
type Shape = Circle | Square;
 
function getArea(s: Shape) {
  if (s.kind === "circle") return Math.PI * s.radius ** 2;
  return s.side ** 2;
}

patternsbestpracticescontrolflow

TypeScript · MittelSnippet

Bedingte Typen (Conditional Types)

Bedingte Typen wählen einen von zwei möglichen Typen basierend auf einer Bedingung aus, die als Typhierarchie-Test ausgedrückt wird.

snippet.ts

typescript

1

2

3

type IsString<T> = T extends string ? "Yes" : "No";
 
type Result = IsString<number>; // "No"

syntaxdatatypes

TypeScript · MittelSnippet

Generics mit keyof-Constraints

Die Verwendung von 'keyof' mit Generics stellt sicher, dass ein Funktionsparameter ein gültiger Schlüssel eines spezifischen Objekts ist, was volle Typsicherheit und IDE-Autovervollständigung bietet.

snippet.ts

typescript

1

2

3

4

5

6

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}
 
const user = { id: 1, name: "Bob" };
const userName = getProperty(user, "name");

functionsbestpracticessyntax

TypeScript · MittelSnippet

Abstrakte Klassen für geteilte Logik

Abstrakte Klassen können nicht direkt instanziiert werden. Sie dienen als Vorlagen, die es ermöglichen, gemeinsame Methoden zu definieren, während Unterklassen gezwungen werden, spezifische 'abstrakte' Logik zu implementieren.

snippet.ts

typescript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

abstract class Shape {
  constructor(public color: string) {}
  abstract getArea(): number;
 
  printColor() {
    console.log(`Color: ${this.color}`);
  }
}
 
class Circle extends Shape {
  constructor(color: string, private radius: number) {
    super(color);
  }
  getArea() { return Math.PI * this.radius ** 2; }
}

ooppatterns

TypeScript · MittelSnippet

Template-Literal-Typen

Template-Literal-Typen ermöglichen es, neue String-Typen durch die Kombination bestehender Union-Typen zu erstellen. Dies ist äußerst nützlich, um vorhersehbare String-Muster wie CSS-Klassen oder Aktionsnamen zu generieren.

snippet.ts

typescript

1

2

3

4

5

6

7

type Direction = "left" | "right";
type Speed = "fast" | "slow";
 
type Movement = `${Direction}-${Speed}`;
 
const action: Movement = "left-fast";
// const error: Movement = "up-fast"; // Error

syntaxdatatypes

TypeScript · MittelSnippet

Index-Signaturen für dynamische Keys

Index-Signaturen ermöglichen es Objekten, flexible Keys zu haben, die im Voraus nicht bekannt sind. Man definiert den Typ des Keys (meist String oder Number) und den Typ des zurückgegebenen Wertes.

snippet.ts

typescript

1

2

3

4

5

6

7

8

9

10

11

12

interface StringConfig {
  [key: string]: string | number;
  id: string;
  version: number;
}
 
const config: StringConfig = {
  id: "A1",
  version: 1.2,
  theme: "dark",
  retries: 5
};

syntaxdatatypes