TypeScript Cheatsheet

Übersetzt aus dem Englischen mit ChatGPT.

Datum: April 2026
Lesedauer: 3 Minuten

Notizen und Beispiele von https://www.typescriptlang.org/docs/ .

Compiler - tsc

npm install -g typescript

Mit npx oder ähnlichem Tool kann tsc auch aus den node_modules ausgeführt werden.

tsc hello.ts

Generics

https://www.typescriptlang.org/docs/handbook/2/generics.html 

function identity<Type>(arg: Type): Type {
  return arg;
}
 
// let output = identity<string>("myString");
 
let output = identity("myString");

Type Aliases vs Interfaces

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces 

Type Aliases und Interfaces sind sehr ähnlich, und in vielen Fällen kann frei zwischen ihnen gewählt werden. Fast alle Funktionen eines interface sind auch in type verfügbar. Der wesentliche Unterschied besteht darin, dass ein Typ nicht erneut geöffnet werden kann, um neue Properties hinzuzufügen, während ein Interface immer erweiterbar ist.

Interface “extenden”

interface Animal {
  name: string;
}
 
interface Bear extends Animal {
  honey: boolean;
}
 
const bear = getBear();
bear.name;
bear.honey;

Type “extenden”

type Animal = {
  name: string;
};
 
type Bear = Animal & {
  honey: boolean;
};
 
const bear = getBear();
bear.name;
bear.honey;

Interface mit Feld erweitern

interface Window {
  title: string;
}
 
interface Window {
  ts: TypeScriptAPI;
}
 
const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

Type kann nicht erweitert werden

type Window = {
  title: string;
};
 
type Window = {
  ts: TypeScriptAPI;
};
 
// Error: Duplicate identifier 'Window'.

in-Operator

https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-in-operator-narrowing 

JavaScript hat einen Operator, um festzustellen, ob ein Objekt oder seine Prototype Chain eine Eigenschaft mit einem bestimmten Namen besitzt: den in-Operator.
TypeScript berücksichtigt das als Möglichkeit, potenzielle Typen einzugrenzen (Type Narrowing).

Zum Beispiel beim Code: "value" in x, wobei "value" ein String-Literal ist und x ein Union Type.
Der “true”-Zweig schränkt die Typen von x auf diejenigen ein, die entweder eine optionale oder erforderliche Eigenschaft value besitzen, und der “false”-Zweig schränkt auf Typen ein, die eine optionale oder fehlende Eigenschaft value haben.

type Fish = { swim: () => void };
type Bird = { fly: () => void };
 
function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    return animal.swim();
  }
 
  return animal.fly();
}

Type Predicates

https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates 

Bestehende JavaScript-Konstrukte zur Type Narrowing reichen nur bis zu einem gewissen Punkt. Manchmal möchte man mehr direkte Kontrolle darüber haben, wie sich Typen im Code verändern.

Um einen benutzerdefinierten Type Guard (user-defined type guard) zu definieren, muss man eine Funktion definieren, deren Rückgabetyp ein Type Predicate ist:

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

pet is Fish ist in diesem Beispiel unser Type Predicate. Ein Predicate hat die Form parameterName is Type, wobei parameterName der Name eines Parameters aus der aktuellen Funktionssignatur sein muss.

Jedes Mal, wenn isFish mit einer Variablen aufgerufen wird, wird TypeScript diese Variable auf genau diesen Typ narrowen, sofern der ursprüngliche Typ kompatibel ist.

// Both calls to 'swim' and 'fly' are now okay.
let pet = getSmallPet();
 
if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

Es gilt zu beachten, dass TypeScript nicht nur weiss, dass pet im if-Zweig ein Fish ist; es weiss auch, dass es im else-Zweig kein Fish hat und es daher ein Bird sein muss.

Man kann den Type Guard isFish verwenden, um ein Array vom Typ Fish | Bird zu filtern und ein Array von Fish zu erhalten:

const zoo: (Fish | Bird)[] = [getSmallPet(), getSmallPet(), getSmallPet()];
const underWater1: Fish[] = zoo.filter(isFish);
// or, equivalently
const underWater2: Fish[] = zoo.filter(isFish) as Fish[];
 
// The predicate may need repeating for more complex examples
const underWater3: Fish[] = zoo.filter((pet): pet is Fish => {
  if (pet.name === "sharkey") return false;
  return isFish(pet);
});