TypeScript Cheat Sheet
Zuletzt aktualisiert
Basistypen
Die primitiven Typen und wie du Variablen annotierst.
| Operation | Syntax |
|---|---|
| String | let name: string = "Ada"; |
| Zahl | let age: number = 25; |
| Boolean | let ok: boolean = true; |
| Array von T | let xs: number[] = [1, 2, 3]; |
| Generisches Array | let xs: Array<string> = []; |
| Tuple | let pair: [string, number] = ["a", 1]; |
| Any (keine Typprüfung) | let x: any = 1; |
| Unknown (sicheres any) | let x: unknown = JSON.parse(s); |
| Void (kein Rückgabewert) | function log(): void { … } |
| Never (kehrt nie zurück) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Typinferenz und Annotationen
Wann TS Typen ableitet und wann du annotierst.
| Operation | Syntax |
|---|---|
| Aus dem Wert abgeleitet | let count = 0; // number |
| Explizite Annotation | let count: number = 0; |
| Funktionsparameter | function add(a: number, b: number) { … } |
| Rückgabetyp | function add(a: number, b: number): number { … } |
| Arrow-Funktion | const sq = (x: number): number => x * x; |
| Type Assertion | const el = input as HTMLInputElement; |
| Const Assertion (Literal) | const dirs = ["up", "down"] as const; |
| Non-null Assertion | el!.focus(); |
Interfaces
Beschreibe die Form eines Objekts.
| Operation | Syntax |
|---|---|
| Deklarieren | interface User { id: number; name: string; } |
| Optionale Property | interface User { age?: number; } |
| Readonly Property | interface User { readonly id: number; } |
| Methodensignatur | interface Logger { log(msg: string): void; } |
| Anderes Interface erweitern | interface Admin extends User { role: string; } |
| Index-Signatur | interface Map { [key: string]: number; } |
| In einer Klasse implementieren | class Db implements Logger { … } |
Type Aliases und Unions
Benenne einen Typ und kombiniere Typen mit | und &.
| Operation | Syntax |
|---|---|
| Type Alias | type ID = string | number; |
| Objekt-Alias | type User = { id: number; name: string }; |
| Union-Typ | type Status = "idle" | "loading" | "done"; |
| Intersection-Typ | type Admin = User & { role: string }; |
| Literal-Typ | type Yes = "yes"; |
| Nullable | type Maybe<T> = T | null | undefined; |
| Funktions-Alias | type Handler = (e: Event) => void; |
Funktionen
Typisierte Parameter, Rückgaben und Überladungen.
| Operation | Syntax |
|---|---|
| Optionaler Parameter | function greet(name?: string) { … } |
| Default-Parameter | function greet(name = "friend") { … } |
| Rest-Parameter | function sum(...ns: number[]): number { … } |
| Funktionstyp | let fn: (a: number) => number; |
| Aufrufbares Interface | interface Fn { (x: number): number; } |
| Überladungs-Signaturen | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Void-Rückgabe ignoriert | const cb: () => void = () => 42; // ok |
Klassen
Klassen mit Zugriffsmodifizierern und Parameter-Properties.
| Operation | Syntax |
|---|---|
| Klasse deklarieren | class User { name: string; } |
| Konstruktor | constructor(name: string) { this.name = name; } |
| Parameter-Property | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Readonly-Feld | readonly id: number; |
| Statisches Member | static count = 0; |
| Getter / Setter | get name() { return this._name; } |
| Vererbung | class Admin extends User { … } |
| Abstrakte Klasse | abstract class Shape { abstract area(): number; } |
Generics
Wiederverwendbare Typen, parametrisiert mit anderen Typen.
| Operation | Syntax |
|---|---|
| Generische Funktion | function id<T>(x: T): T { return x; } |
| Mit explizitem Typ aufrufen | id<string>("hi"); |
| Generisches Interface | interface Box<T> { value: T; } |
| Generischer Alias | type Pair<A, B> = [A, B]; |
| Generische Klasse | class Stack<T> { items: T[] = []; } |
| Constraint mit extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| Default-Typparameter | interface Box<T = string> { value: T; } |
| keyof-Operator | type K = keyof User; // "id" | "name" |
| Index-Zugriffstyp | type Name = User["name"]; |
Narrowing
Eine Union zur Laufzeit auf einen einzelnen Typ einengen.
| Operation | Syntax |
|---|---|
| typeof-Prüfung | if (typeof x === "string") { … } |
| instanceof-Prüfung | if (e instanceof Error) { … } |
| in-Operator | if ("name" in obj) { … } |
| Narrowing durch Gleichheit | if (status === "done") { … } |
| Wahrheitswert-Prüfung | if (value) { … } |
| Eigener Type Guard | function isUser(x: any): x is User { return "id" in x; } |
| Discriminated Union | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| Vollständigkeit mit never | const _: never = shape; |
Enums
Benannte Mengen von Konstanten.
| Operation | Syntax |
|---|---|
| Numerisches Enum | enum Direction { Up, Down, Left, Right } |
| String-Enum | enum Status { Idle = "IDLE", Done = "DONE" } |
| Einen Wert verwenden | let d: Direction = Direction.Up; |
| Const Enum (inline) | const enum Color { Red, Green, Blue } |
| Literal-Union (modern) | type Status = "idle" | "done"; |
Utility Types
Eingebaute Helper, die bestehende Typen umformen.
| Operation | Syntax |
|---|---|
| Alle Props optional | Partial<User> |
| Alle Props erforderlich | Required<User> |
| Alle Props readonly | Readonly<User> |
| Teilmenge an Keys auswählen | Pick<User, "id" | "name"> |
| Einen oder mehrere Keys weglassen | Omit<User, "password"> |
| Objekt mit gegebenen Keys | Record<string, number> |
| Aus einer Union ausschließen | Exclude<"a" | "b" | "c", "a"> |
| Nur aus einer Union behalten | Extract<"a" | "b", "a" | "c"> |
| null / undefined entfernen | NonNullable<string | null> |
| Funktions-Rückgabetyp | ReturnType<typeof fn> |
| Parameter-Tuple | Parameters<typeof fn> |
| Awaited Promise-Typ | Awaited<Promise<string>> |
Module
Import und Export zwischen Dateien.
| Operation | Syntax |
|---|---|
| Benannter Export | export function add(a: number, b: number) { … } |
| Default-Export | export default class User { … } |
| Re-Export | export { User } from "./user"; |
| Benannter Import | import { add } from "./math"; |
| Default-Import | import User from "./user"; |
| Nur-Typ-Import | import type { User } from "./user"; |
| Alles importieren | import * as math from "./math"; |
| Triple-Slash-Referenz | /// <reference types="node" /> |
tsconfig-Essenzielles
Die Compiler-Flags, die man kennen sollte.
| Option | Wirkung |
|---|---|
"strict": true | Aktiviert alle Strict-Mode-Prüfungen (empfohlen). |
"target": "ES2022" | JavaScript-Version, die tsc ausgibt. |
"module": "ESNext" | Modulsystem in der Ausgabe. |
"moduleResolution": "bundler" | Auflösung wie moderne Bundler. |
"jsx": "react-jsx" | JSX für React 17+ aktivieren. |
"esModuleInterop": true | Sauberere Default-Imports aus CommonJS. |
"skipLibCheck": true | Typprüfung in node_modules überspringen (schnellerer Build). |
"noEmit": true | Nur Typprüfung - die Ausgabe übernimmt der Bundler. |
Die TypeScript-Syntax, die du am häufigsten brauchst, auf einer Seite. Dieses TypeScript Cheat Sheet ist eine schnelle Referenz für den TS-Alltag: Basistypen, Interfaces, Type Aliases, Generics, Unions, Narrowing und die eingebauten Utility Types.
Alles hier ist Standard-TypeScript, das mit tsc kompiliert und überall dort läuft, wo modernes JavaScript läuft. Kopiere, was du brauchst, oder probiere jeden Snippet live im TypeScript-Playground aus - ohne Installation.
FAQ TypeScript Cheat Sheet
Ist dieses TypeScript Cheat Sheet kostenlos?
Ja. Dieses TypeScript Cheat Sheet ist komplett kostenlos, ohne Registrierung. Setze es als Lesezeichen und komm zurück, wenn du einen Typ, ein Interface oder einen Utility Type nachschlagen willst.
Was ist der Unterschied zwischen Interface und Type Alias?
interface nicht ausdrücken kannst. Häufige Regel: interface für öffentliche Objektformen, type für Unions, Tuples und berechnete Typen.Was ist der Unterschied zwischen any und unknown?
any schaltet die Typprüfung komplett aus - der Compiler lässt dich damit alles tun. unknown ist typsicher: du musst es einengen (mit typeof, instanceof oder einem Type Guard), bevor du es benutzen kannst. Bevorzuge unknown für Werte aus externen Quellen wie JSON.parse oder fetch - es zwingt dich zur Validierung vor der Nutzung.Muss ich JavaScript vor TypeScript lernen?
Ja - TypeScript ist JavaScript mit einem Typsystem obendrauf, also kommt jede JS-Fähigkeit zum Tragen. Wenn du noch JS-Grundlagen (Arrays, Objekte, async/await) aufbaust, ist das JavaScript-Cheat-Sheet ein guter Startpunkt und Coddys kostenloser JavaScript-Kurs vermittelt dasselbe interaktiv.
Kann ich TypeScript online üben?
Ja. Öffne den TypeScript-Playground, um jeden Snippet aus diesem Cheat Sheet im Browser auszuführen - ohne Installation. Wenn du Struktur willst, lerne über die JavaScript-Landing und wende die Typen dieser Seite obendrauf an.
Verwandte Ressourcen
Weitere Spickzettel
