TypeScript-Spickzettel
Eine durchsuchbare, druckbare TypeScript-Referenz: Typen, Interfaces, Generics, Utility-Types, Narrowing, Deklarationsdateien und tsconfig. Kostenlos.
Basic types
14let name: string = "Ada";
let age: number = 30;
let ok: boolean = true;
let ids: number[] = [1, 2];
let pair: [string, number] = ["a", 1];
let anything: unknown;
let loose: any;
function log(): void {}
function fail(): never { throw new Error(); }
let big: bigint = 9007199254740993n;
let id: string | null = null;
const point = { x: 1 } as const;
enum Status { Active, Inactive }
type Dir = "up" | "down";
Interfaces & type aliases
12interface User { id: number; name: string; }
type User = { id: number; name: string };
interface User { nickname?: string; }
interface User { readonly id: number; }
interface Admin extends User { role: string; }
type Admin = User & { role: string };
interface Dict { [key: string]: number; }
interface Fn { (x: number): string; }
interface User { greet(): void; }
interface Box<T> { value: T; }
interface Window { myGlobal: string; }
type Point = Readonly<{ x: number }>;
Unions, intersections & narrowing
12type Id = string | number;
type Full = A & B;
if (typeof id === "string") { ... }
if (el instanceof HTMLElement) { ... }
if ("radius" in shape) { ... }
if (value != null) { ... }
switch (shape.kind) { case "circle": ... }
type Shape = Circle | Square;
const x = cond ? a : b;
user?.address?.city
const name = input ?? "default";
function assertNever(x: never): never { throw x; }
Generics
11function first<T>(arr: T[]): T { return arr[0]; }
first<string>(["a", "b"])
interface Box<T> { value: T; }
class Stack<T> { items: T[] = []; }
type Pair<K, V> = { key: K; value: V };
<T extends { id: number }>
<T, K extends keyof T>(obj: T, key: K): T[K]
<T = string>
function wrap<const T>(v: T): T[]
type Flatten<T> = T extends Array<infer U> ? U : T;
const map = new Map<string, User>();
Utility types
14Partial<User>
Required<User>
Readonly<User>
Pick<User, "id" | "name">
Omit<User, "password">
Record<string, number>
Exclude<T, U>
Extract<T, U>
NonNullable<T>
ReturnType<typeof fn>
Parameters<typeof fn>
Awaited<Promise<string>>
InstanceType<typeof MyClass>
Uppercase<"id"> / Capitalize<"id">
Functions & overloads
11function add(a: number, b: number): number
const add = (a: number, b: number) => a + b;
function log(msg: string, level?: string)
function log(msg: string, level = "info")
function sum(...nums: number[]): number
type Handler = (e: Event) => void;
function get(id: number): User;
function get(ids: number[]): User[];
function get(x: any): any { ... }
function fn(this: HTMLElement, e: Event)
async function load(): Promise<User>
function isUser(x: unknown): x is User
const fn: typeof otherFn = ...;
Classes
12class User { constructor(public name: string) {} }
private secret: string;
#secret: string;
protected id: number;
readonly createdAt = new Date();
static create(): User { return new User(); }
class Admin extends User { ... }
class Api implements Fetcher { ... }
abstract class Shape { abstract area(): number; }
get fullName(): string { return ...; }
override toString(): string { ... }
declare id: number;
Type guards & assertions
11function isUser(x: unknown): x is User
function assertUser(x: unknown): asserts x is User
function assertOk(x: unknown): asserts x
const el = input as HTMLInputElement;
value!
x as unknown as Y
const roles = ["admin", "user"] as const;
if (Array.isArray(value)) { ... }
satisfies Record<string, string>
typeof x === "object" && x !== null
catch (e) { if (e instanceof Error) ... }
Mapped & conditional types
12type Flags<T> = { [K in keyof T]: boolean };
{ [K in keyof T]?: T[K] }
{ [K in keyof T]-?: T[K] }
{ readonly [K in keyof T]: T[K] }
{ -readonly [K in keyof T]: T[K] }
{ [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] }
type IsString<T> = T extends string ? true : false;
T extends (infer U)[] ? U : never
type Keys = keyof User;
type Value = User["name"];
type Route = `/users/${number}`;
T extends any ? T[] : never
Modules & declaration files
12export interface User { ... }
export default class Api { ... }
import { User } from "./user";
import type { User } from "./user";
export type { User };
import * as path from "node:path";
declare module "my-lib" { ... }
declare global { interface Window { ... } }
declare const VERSION: string;
export {};
/// <reference types="node" />
npm i -D @types/lodash
tsconfig essentials
13"strict": true
"target": "ES2022"
"module": "ESNext"
"moduleResolution": "bundler"
"noEmit": true
"esModuleInterop": true
"skipLibCheck": true
"noUncheckedIndexedAccess": true
"paths": { "@/*": ["./src/*"] }
"outDir": "./dist", "rootDir": "./src"
"sourceMap": true, "declaration": true
npx tsc --noEmit
npx tsc --init
Kein Eintrag passt zu „:q“.
Über TypeScript-Spickzettel
Dieses TypeScript-Cheat-Sheet verwandelt das Typsystem in eine einzige durchsuchbare Seite: Basistypen, Interfaces und Type Aliases, Unions, Intersections und Narrowing, Generics, die eingebauten Utility-Types, Funktionen und Overloads, Klassen, Type Guards und Assertions, Mapped und Conditional Types, Module und Deklarationsdateien sowie die tsconfig-Optionen, die wirklich zählen.
Es ist für die tägliche Arbeit geschrieben: die genaue Form einer Generic-Constraint, was Pick, Omit, Record und ReturnType bewirken, wie eine Discriminated Union verengt, wann man `satisfies` statt eines Casts einsetzt, damit Sie ein Detail prüfen können, ohne Ihren Editor für das Handbuch zu verlassen.
Wie jedes Cheat-Sheet in dieser Gruppe ist es kostenlos und clientseitig: Filtern Sie Zeilen live mit dem Suchfeld, springen Sie mit dem fixierten Inhaltsverzeichnis zwischen Abschnitten, kopieren Sie jeden Codeausschnitt mit einem Klick und drucken Sie die Seite als Referenz für Ihren Schreibtisch.
So verwenden Sie TypeScript-Spickzettel
- Öffnen Sie das Sheet und überfliegen Sie die Abschnitte, von Basistypen und Generics bis zu tsconfig-Grundlagen.
- Suchen Sie nach einem Stichwort wie Partial, narrowing oder satisfies, um alle Zeilen live zu filtern.
- Springen Sie zu Utility-Types oder Mapped & Conditional Types, wenn Sie die fortgeschrittene Typ-Syntax benötigen.
- Klicken Sie auf einen Codeausschnitt oder sein Kopiersymbol, um den TypeScript-Code in Ihre Zwischenablage zu kopieren.
- Nutzen Sie Drucken für eine Papierkopie der vollständigen TypeScript-Referenz.