TypeScript Academy · Lektion

Typsicherer Umgang mit unknown

Schränken Sie unknown-Werte ein, bevor Sie sie sicher verwenden.

Lektion 4 von 413 Schritte

Typsicherer Umgang mit unknown ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Sicher mit unknown arbeiten

Externe Daten als unknown zu typisieren, ist nur die halbe Aufgabe. Die andere Hälfte besteht darin, sie vor der Verwendung durch Narrowing auf einen konkreten Typ einzugrenzen. Diese Lektion behandelt die wichtigsten Techniken für dieses Narrowing.

function describe(v: unknown): string {
  if (typeof v === 'string') return 'string: ' + v;
  if (typeof v === 'number') return 'number: ' + v;
  return 'other';
}
console.log(describe('hi'), describe(7), describe(true));

Narrowing mit typeof

Der typeof-Guard ist das einfachste Werkzeug. Er grenzt unknown auf primitive Typen ein: string, number, boolean, function, object und weitere.

function double(v: unknown): number {
  if (typeof v === 'number') {
    return v * 2; // v is number here
  }
  return 0;
}
console.log(double(21), double('no'));

Narrowing mit instanceof

Für Instanzen von Klassen verwenden Sie instanceof. Dadurch wird unknown auf die konkrete Klasse eingegrenzt, sodass Sie sicher auf deren Methoden und Eigenschaften zugreifen können.

function handle(v: unknown): string {
  if (v instanceof Date) {
    return v.toISOString(); // v is Date
  }
  return 'not a date';
}
console.log(handle(new Date(0)));

Narrowing mit dem in-Operator

Der in-Operator prüft, ob eine Eigenschaft in einem Objekt vorhanden ist, und grenzt Werte mit Objekttyp ein. Stellen Sie zunächst sicher, dass der Wert ein Objekt ungleich null ist, und prüfen Sie dann seine Schlüssel.

function getName(v: unknown): string {
  if (typeof v === 'object' && v !== null && 'name' in v) {
    return String((v as { name: unknown }).name);
  }
  return 'anonymous';
}
console.log(getName({ name: 'Ada' }), getName(5));

Benutzerdefinierte Type Guards

Ein benutzerdefinierter Type Guard ist eine Funktion, deren Rückgabetyp value is T lautet. Wenn sie true zurückgibt, grenzt TypeScript das Argument an der Aufrufstelle auf T ein.

function isString(v: unknown): v is string {
  return typeof v === 'string';
}

function shout(v: unknown): string {
  return isString(v) ? v.toUpperCase() : '?';
}
console.log(shout('hey'), shout(9));

Guards für Objektstrukturen

Benutzerdefinierte Guards eignen sich besonders gut zum Validieren von Objektstrukturen. Schreiben Sie eine Funktion, die alle erforderlichen Felder prüft, und der restliche Code kann dem eingegrenzten Typ vertrauen.

type User = { id: number; name: string };

function isUser(v: unknown): v is User {
  return typeof v === 'object' && v !== null &&
    'id' in v && 'name' in v;
}
console.log(isUser({ id: 1, name: 'Sam' }), isUser({}));

JSON.parse liefert Daten ähnlich wie unknown

JSON.parse ist so typisiert, dass es any zurückgibt, wodurch die Sicherheit unbemerkt umgangen wird. Bewährte Praxis: Erfassen Sie das Ergebnis als unknown und validieren Sie es, bevor Sie der Struktur vertrauen.

function parseConfig(text: string): unknown {
  return JSON.parse(text);
}
const raw = parseConfig('{"port":8080}');
console.log(typeof raw);

Geparstes JSON validieren

Kombinieren Sie JSON.parse mit einem Type Guard, um nicht vertrauenswürdigen Text sicher in einen typisierten Wert umzuwandeln. Wenn die Validierung fehlschlägt, behandeln Sie den Fehler, anstatt fehlerhaften Daten zu vertrauen.

type Config = { port: number };

function isConfig(v: unknown): v is Config {
  return typeof v === 'object' && v !== null &&
    'port' in v && typeof (v as any).port === 'number';
}

const data: unknown = JSON.parse('{"port":8080}');
if (isConfig(data)) console.log('Port:', data.port);

Mehrere Guards verketten

Bei komplexen Eingaben können Sie Guards schrittweise anwenden: Prüfen Sie zuerst die grobe Struktur und verfeinern Sie sie anschließend. Jeder Guard grenzt den Typ ein Stück weiter ein, sodass Schritt für Schritt präzise und sichere Typen entstehen.

function process(v: unknown): string {
  if (Array.isArray(v)) {
    if (v.every((x) => typeof x === 'string')) {
      return v.join('-');
    }
  }
  return 'invalid';
}
console.log(process(['a', 'b']), process([1, 2]));

Bei ungültigen Daten einen Fehler auslösen

Wenn die Validierung erforderlicher Daten fehlschlägt, lösen Sie einen Fehler aus. In Kombination mit einer Fehlerfunktion, die never zurückgibt, bleibt der Erfolgsfall übersichtlich und korrekt typisiert.

function asNumber(v: unknown): number {
  if (typeof v === 'number') return v;
  throw new Error('Expected a number');
}
console.log(asNumber(42));
try { asNumber('x'); } catch (e) { console.log('rejected'); }

Alles zusammenführen

Das vollständige Muster: Empfangen Sie Daten als unknown, grenzen Sie sie mit Guards ein und arbeiten Sie anschließend mit dem präzisen Typ. Dies ist die sichere Grenze zwischen der untypisierten Außenwelt und Ihrem typisierten Code.

type Point = { x: number; y: number };
function isPoint(v: unknown): v is Point {
  return typeof v === 'object' && v !== null &&
    'x' in v && 'y' in v;
}
const input: unknown = { x: 1, y: 2 };
if (isPoint(input)) console.log(input.x + input.y);

Schnelltest

Testen Sie Ihr Verständnis der sicheren Verarbeitung von unknown.

Beantworte es in der interaktiven Lektion

Zusammenfassung: unknown verarbeiten

Sie haben gelernt, unknown einzugrenzen mit:

typeof für primitive Typen und instanceof für Klasseninstanzen.
dem in-Operator für Objekteigenschaften.
benutzerdefinierten Type Guards mit dem Rückgabetyp value is T.
der Validierung von Ergebnissen aus JSON.parse, bevor Sie ihnen vertrauen.

Im nächsten Kurs geht es um Typassertionen und Casts.

function isNonEmpty(v: unknown): v is string {
  return typeof v === 'string' && v.length > 0;
}
console.log(isNonEmpty('hi'), isNonEmpty(''));

Kostenlos starten

Lerne TypeScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 101
Lektionen: 352

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Typsicherer Umgang mit unknown“ kostenlos?

Ja — der vollständige Text von „Typsicherer Umgang mit unknown“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Typsicherer Umgang mit unknown“?

Schränken Sie unknown-Werte ein, bevor Sie sie sicher verwenden. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Typsicherer Umgang mit unknown“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy