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 · Experten →
TypeScript · ExperteSnippet

Nominale Typisierung durch Branded Types

TypeScript verwendet strukturelle Typisierung, aber manchmal benötigen wir nominale Typisierung, um das versehentliche Mischen logisch unterschiedlicher Primitivtypen (wie Währungen oder IDs) zu verhindern. Branding 'markiert' einen Typ mit einer eindeutigen Eigenschaft, die zur Laufzeit nicht existiert, aber zur Kompilierzeit eine strikte Trennung erzwingt.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
type Brand<K, T> = K & { __brand: T };
 
type USD = Brand<number, "USD">;
type EUR = Brand<number, "EUR">;
 
const usd = 10 as USD;
const eur = 10 as EUR;
 
function addUSD(a: USD, b: USD): USD {
  return (a + b) as USD;
}
 
// Error: Argument of type 'EUR' is not assignable to 'USD'
// addUSD(usd, eur);
SecurityBest Practices
TypeScript · ExperteSnippet

Rekursives Parsen von Template-Literal-Typen

Dieses Snippet nutzt Template-Literal-Typen und rekursive bedingte Typen, um dynamische Pfadparameter zur Kompilierzeit aus einem String-Literal zu extrahieren. Es zeigt, wie TypeScript Strings parsen kann, um komplexe Objekttypen basierend auf Konventionen wie ':param' zu erstellen.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
type ExtractParams<T extends string> = 
  T extends `${string}:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof ExtractParams<Rest>]: string }
    : T extends `${string}:${infer Param}`
    ? { [K in Param]: string }
    : {};
 
const route = "/user/:id/posts/:postId";
type RouteParams = ExtractParams<typeof route>;
// Result: { id: string; postId: string; }
SyntaxDatentypen
TypeScript · ExperteSnippet

Fortgeschrittene Inferenz mit kontravarianten Parametern

Dieses Experten-Snippet zeigt, wie man einen Union-Typ in einen Intersection-Typ umwandelt. Es nutzt die Tatsache aus, dass Funktionsparameter kontravariant sind, was TypeScript dazu zwingt, mehrere Union-Mitglieder während der Inferenz zu einer einzigen Intersection zu vereinen.

snippet.ts
typescript
1
2
3
4
5
6
type UnionToIntersection<U> = 
  (U extends any ? (k: U) => void : never) extends 
  ((k: infer I) => void) ? I : never;
 
type Result = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// Result: { a: 1 } & { b: 2 }
DatentypenPerformance
TypeScript · ExperteSnippet

Explizites Ressourcenmanagement mit 'using'

Eingeführt in TypeScript 5.2, nutzt die 'using'-Deklaration den 'Symbol.dispose'-Hook, um sicherzustellen, dass Ressourcen wie Dateihandles oder Datenbankverbindungen automatisch beim Verlassen des Block-Scopes bereinigt werden, ähnlich wie 'using' in C# oder 'with' in Python.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
class TempFile implements Disposable {
  constructor(public path: string) {}
  [Symbol.dispose]() {
    console.log(`Deleting ${this.path}`);
  }
}
 
function process() {
  using file = new TempFile("/tmp/log.txt");
  // File is automatically disposed at end of scope
}
SyntaxBest Practices
TypeScript · ExperteSnippet

Vollständigkeitsprüfung mit dem 'never'-Typ

Durch die Zuweisung einer Variable zum Typ 'never' in einem Default-Zweig erstellen Sie eine Prüfung auf Vollständigkeit zur Kompilierzeit. Wenn das 'Shape'-Union um ein Mitglied erweitert wird, schlägt die Kompilierung fehl, bis der neue Fall behandelt wird.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
type Shape = { type: "circle" } | { type: "square" };
 
function getArea(shape: Shape) {
  switch (shape.type) {
    case "circle": return Math.PI;
    case "square": return 1;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}
KontrollstrukturenFehlerbehandlung
TypeScript · ExperteSnippet

Assertion-Signaturen für Runtime-Guarding

Assertion-Signaturen verwenden das 'asserts'-Schlüsselwort, um dem Compiler mitzuteilen, dass eine Bedingung wahr sein muss, wenn die Funktion normal zurückkehrt. Dies schränkt Typen für den Rest des Scopes ein und reduziert verschachtelte If-Blöcke.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
function assertIsString(val: any): asserts val is string {
  if (typeof val !== "string") {
    throw new Error("Not a string!");
  }
}
 
function process(input: unknown) {
  assertIsString(input);
  // input is now narrowed to 'string' for the rest of the scope
  console.log(input.toUpperCase());
}
KontrollstrukturenFunktionen
TypeScript · ExperteSnippet

Kontextuelle Metadaten mit Stage 3 Decorators

Stage 3 Decorators bieten eine typsichere Möglichkeit, Klassenmitglieder zu umschließen. Im Gegensatz zu alten experimentellen Decorators nutzen diese ein strukturiertes 'context'-Objekt, das Namen, Private/Static-Status und andere Metadaten enthält, ohne 'reflect-metadata' zu benötigen.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
function loggedMethod<This, Args extends any[], Return>(
  target: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
  const methodName = String(context.name);
  return function (this: This, ...args: Args): Return {
    console.log(`Calling ${methodName}`);
    return target.call(this, ...args);
  };
}
OOPDesign Patterns
TypeScript · ExperteSnippet

Präzise Validierung mit dem 'satisfies' Operator

Der 'satisfies'-Operator validiert, ob ein Objekt einem Typ entspricht, ohne den inferierten Typ zu erweitern. Dies erlaubt es, spezifische Literal-Informationen zu behalten (z.B. dass 'red' ein Tuple ist), während sichergestellt wird, dass das Objekt einem allgemeinen Interface folgt.

snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
type Colors = "red" | "green" | "blue";
type RGB = [number, number, number];
 
const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Record<Colors, RGB | string>;
 
// palette.red is inferred as [number, number, number], not string | RGB
const redValue = palette.red[0];
SyntaxBest Practices