Nullable in TypeScript: Wie deklariere ich einen Typ, der null sein kann?

TypeScript und seine ewige Frage: Wie macht man einen Typ nullable?

Hallo, Kollege! Wenn du jemals in TypeScript programmiert hast, bist du sicherlich auf die Situation gestoßen, in der eine Funktion einen Wert zurückgeben kann, aber auch nicht. Oder eine Variable wird nicht sofort initialisiert. Und dann stellt sich die sakramentale Frage: Wie deklariere ich einen Typ, der null oder undefined sein kann?

Diese Frage ist eine der beliebtesten auf Stack Overflow (Zehntausende von Aufrufen!) und das nicht ohne Grund. TypeScript ist streng, aber fair. Es erlaubt uns nicht, einfach so null einer Variable vom Typ string zuzuweisen. Und das ist großartig, denn es rettet vor einer Menge Bugs. Aber was ist, wenn nullable ein Teil der Geschäftslogik ist? Lass es uns herausfinden.

In diesem Artikel geben wir nicht nur eine trockene Antwort. Wir gehen von den Grundlagen bis zu fortgeschrittenen Techniken, analysieren häufige Fehler und lernen, wie man Code schreibt, der sicher und elegant ist. Los geht's!

Grundlagen: Union Types und Null

Der einfachste und direkteste Weg, einen Typ nullable zu machen, ist die Verwendung eines Union Types (Typvereinigung). Wenn eine Variable ein String oder null sein kann, schreiben wir so:

let userName: string | null = null;\nuserName = "Alice"; // Ok\nuserName = null;    // Auch ok\n

Das Gleiche funktioniert mit undefined. In TypeScript sind null und undefined unterschiedliche Typen (wenn das Flag --strictNullChecks nicht aktiviert ist, aber dazu später mehr).

let age: number | undefined;\nage = 25;\nage = undefined; // Funktioniert\n

Wichtig: Wenn du | null oder | undefined verwendest, zwingt dich TypeScript, den Wert vor der Verwendung zu überprüfen. Der Versuch, eine Methode für ein potenziell null-Objekt aufzurufen, führt zu einem Kompilierungsfehler. Das ist die "Sicherheit", für die wir TS lieben.

Beispiel aus dem echten Leben: Benutzersuche

interface User {\n  id: number;\n  name: string;\n}\n\nfunction findUser(id: number): User | null {\n  // ...Suchlogik\n  if (id === 1) {\n    return { id: 1, name: "Ivan" };\n  }\n  return null;\n}\n\nconst user = findUser(2);\n// user.name; // Fehler! 'user' ist möglicherweise null\nif (user) {\n  console.log(user.name); // Jetzt sicher\n}\n

Siehst du? Der Compiler sagt dir selbst: "Hey, überprüfe es, sonst stürzt du ab!". Das spart Stunden beim Debuggen.

Optionale Parameter und Eigenschaften (Optional Chaining)

Häufig sind nicht nur Variablen nullable, sondern auch Felder von Objekten oder Funktionsargumente. Dafür gibt es in TypeScript eine spezielle Syntax – den optional modifier (Fragezeichen ?).

Optionale Funktionsparameter

function greet(name?: string) {\n  if (name) {\n    return `Hallo, ${name}!`;\n  }\n  return "Hallo, Fremder!";\n}\n\nconsole.log(greet("Peter")); // Hallo, Peter!\nconsole.log(greet());       // Hallo, Fremder!\n

Der Typ des Parameters name wird automatisch zu string | undefined. Beachte: Wenn ein Parameter optional ist, kann er weggelassen werden, und TS meckert nicht.

Optionale Eigenschaften von Interfaces

interface Config {\n  url: string;\n  port?: number; // kann number oder undefined sein\n}\n\nconst config1: Config = { url: "http://localhost" }; // port fehlt\nconst config2: Config = { url: "http://localhost", port: 3000 };\n

Beim Zugriff auf config1.port sagt TypeScript, dass dies number | undefined ist. Und das ist richtig – wir wissen nicht, ob der Port gesetzt ist.

Optionale Verkettung (Optional Chaining) – Ihr bester Freund

Mit dem Aufkommen von ES2020 und TypeScript 3.7 haben wir eine elegante Möglichkeit, sicher auf verschachtelte Eigenschaften zuzugreifen, die null oder undefined sein können. Dies nennt man optional chaining