capypad
0 Tage Serie
Neues Quiz
Code-Bibliothek

Code, der lesenswert ist.

Sorgfältig kuratierte Snippets — TypeScript, Python, Rust, Go und mehr. Jedes mit einer Zeile-für-Zeile-Erklärung, damit du Code so liest, wie die Leute ihn geschrieben haben.

3498 Snippets · 10 Sprachen
▶ Lernen starten
Sammlung öffnen: TypeScript · Fortgeschrittene →
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];
};
SyntaxBest Practices
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"]
};
SyntaxDatentypen
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;
}
Design PatternsBest PracticesKontrollstrukturen
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"
SyntaxDatentypen
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");
FunktionenBest PracticesSyntax
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; }
}
OOPDesign Patterns
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
SyntaxDatentypen
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
};
SyntaxDatentypen