Nullable Types ('strictNull')

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 71 von 73.

Standardmäßig erlaubt TypeScript, dass null und undefined jedem Typ zugewiesen werden können, was zu Laufzeitfehlern führen kann. Die Compiler-Option strictNullChecks ändert dieses Verhalten, indem sie null und undefined zu ihren eigenen, eigenständigen Typen macht.

Wenn strictNullChecks aktiviert ist, müssen Sie explizit null oder undefined in Ihren Typannotationen angeben, wenn Sie diese Werte zulassen möchten:

// Ohne strictNullChecks - dies wäre erlaubt
let name: string = null; // Fehler mit strictNullChecks!

// Mit strictNullChecks - Sie müssen explizit sein
let name: string | null = null; // Jetzt funktioniert dies

Dies zwingt Sie dazu, potenzielle null-Werte zu behandeln, bevor Sie sie verwenden. Sie können keine Methoden aufrufen oder auf Eigenschaften eines Wertes zugreifen, der null sein könnte, ohne dies vorher zu prüfen:

function processName(name: string | null) {
  // Dies würde einen Fehler verursachen
  // console.log(name.toUpperCase());
  
  // Sie müssen zuerst prüfen
  if (name !== null) {
    console.log(name.toUpperCase()); // Sicher zu verwenden
  }
}

Diese Compiler-Option hilft dabei, die häufigen „Cannot read property of null“-Laufzeitfehler zu verhindern, indem sie diese bereits zur Kompilierzeit abfängt, was Ihren Code zuverlässiger und vorhersehbarer macht.

Aufgabe

Einfach

Erstellen Sie eine Funktion, die Benutzerprofildaten sicher verarbeitet, welche null-Werte enthalten könnten. Diese Herausforderung demonstriert, wie strictNullChecks Sie dazu zwingt, Nullable-Typen explizit zu behandeln.

Erstellen Sie eine Funktion namens getUserDisplayName, die:

Einen Parameter fullName vom Typ string | null entgegennimmt
Den vollständigen Namen zurückgibt, wenn dieser nicht null ist
"Anonymous User" zurückgibt, wenn der vollständige Name null ist
Einen expliziten Rückgabetyp string hat

Erstellen Sie eine zweite Funktion namens formatUserEmail, die:

Einen Parameter email vom Typ string | null entgegennimmt
Die E-Mail in Kleinbuchstaben zurückgibt, wenn sie nicht null ist
"No email provided" zurückgibt, wenn die E-Mail null ist
Einen expliziten Rückgabetyp string hat

Erstellen Sie eine dritte Funktion namens getUserInfo, die:

Zwei Parameter entgegennimmt: name vom Typ string | null und email vom Typ string | null
Beide vorherigen Funktionen verwendet, um die Parameter zu verarbeiten
Einen formatierten String zurückgibt: "Name: [processed name], Email: [processed email]"
Einen expliziten Rückgabetyp string hat

Testen Sie Ihre Funktionen mit den folgenden Daten:

Rufen Sie getUserDisplayName("John Smith") auf und geben Sie das Ergebnis aus
Rufen Sie getUserDisplayName(null) auf und geben Sie das Ergebnis aus
Rufen Sie formatUserEmail("ALICE@EXAMPLE.COM") auf und geben Sie das Ergebnis aus
Rufen Sie formatUserEmail(null) auf und geben Sie das Ergebnis aus
Rufen Sie getUserInfo("Bob Johnson", "bob@test.com") auf und geben Sie das Ergebnis aus
Rufen Sie getUserInfo(null, null) auf und geben Sie das Ergebnis aus
Rufen Sie getUserInfo("Sarah Wilson", null) auf und geben Sie das Ergebnis aus

Probier es selbst

// TODO: Schreibe deinen Code hier
// Erstelle die Funktion getUserDisplayName, die fullName (string | null) entgegennimmt und einen string zurückgibt

// Erstelle die Funktion formatUserEmail, die email (string | null) entgegennimmt und einen string zurückgibt

// Erstelle die Funktion getUserInfo, die name und email (beide string | null) entgegennimmt und einen string zurückgibt

// Teste die Funktionen und gib die Ergebnisse aus
console.log(getUserDisplayName("John Smith"));
console.log(getUserDisplayName(null));
console.log(formatUserEmail("ALICE@EXAMPLE.COM"));
console.log(formatUserEmail(null));
console.log(getUserInfo("Bob Johnson", "bob@test.com"));
console.log(getUserInfo(null, null));
console.log(getUserInfo("Sarah Wilson", null));