So erhalten Sie TypeScript-Interface-Schlüssel als String-Array im Jahr 2025

Einleitung: Warum brauchen Sie Interface-Schlüssel als Array?

Stellen Sie sich vor: Sie arbeiten an einem großen TypeScript-Projekt und müssen alle Felder eines komplexen Objekts durchgehen, ein dynamisches Formular in React erstellen, Daten filtern oder einfach eine Liste der verfügbaren Eigenschaften ausgeben. Das Problem ist, dass TypeScript eine Erweiterung von JavaScript ist und seine Typen nur während der Kompilierung existieren. Zur Laufzeit verschwinden sie. Wie also geht man vor? Wie erhält man TypeScript-Interface-Schlüssel als String-Array, um sie im eigentlichen Code zu verwenden?

Eine Frage, die Tausende von Entwicklern auf Stack Overflow quält. Heute, im Jahr 2025, werden wir alle möglichen Ansätze durchgehen: von einfachen und zuverlässigen bis hin zu fortgeschrittenen. Sie erfahren, wie Sie TypeScript für sich arbeiten lassen, nicht gegen sich. Los geht's!

Das Problem: "Verschwindende" Typen

Schauen wir uns direkt die Wurzel des Problems an. Angenommen, Sie haben folgendes Interface:

interface User {  id: number;  name: string;  email: string;  isAdmin: boolean;}

Sie benötigen ein String-Array: ['id', 'name', 'email', 'isAdmin']. Das Erste, was einem in den Sinn kommt, ist die Verwendung von Object.keys(). Aber es gibt einen Haken. Wenn Sie versuchen, Folgendes zu schreiben:

const keys = Object.keys({} as User);// Typ: string[]

Gibt TypeScript den Typ string[] zurück, nicht ('id' | 'name' | 'email' | 'isAdmin')[]. Das ist sinnlos – Sie verlieren alle Informationen über die spezifischen Schlüssel.

Warum passiert das? Weil Object.keys() in JavaScript immer ein Array von Strings zurückgibt. TypeScript kann nicht mit Sicherheit wissen, welche Schlüssel ein Objekt zur Laufzeit haben wird (z. B. wenn das Objekt erweitert wird). Daher gibt es den sichersten, aber nutzlosen Typ zurück.

Lösung 1: "Manuelles" Array (Einfachheit und Sicherheit)

Der einfachste und für 90% der Fälle empfohlene Weg besteht darin, ein Array manuell zu erstellen und den Typ daraus abzuleiten. Das ist kein Scherz. Dieser Ansatz stellt sicher, dass Ihr Array immer mit dem Interface synchronisiert ist.

// 1. Array der Schlüssel definierenexport const USER_KEYS = ['id', 'name', 'email', 'isAdmin'] as const;

// 2. Typ aus dem Array ableitentype UserKey = typeof USER_KEYS[number]; // 'id' | 'name' | 'email' | 'isAdmin'

// 3. Für das Interface verwendeninterface User {  [key in UserKey]: key extends 'id' ? number     : key extends 'name' ? string     : key extends 'email' ? string     : boolean;}

// 4. String-Array erhaltenconst keys: string[] = [...USER_KEYS];console.log(keys); // ['id', 'name', 'email', 'isAdmin']

Vorteile: Vollständige Typisierung, keine magischen Tricks, leicht zu lesen und zu warten.

Nachteile: Sie müssen zwei Stellen (Interface und Array) manuell pflegen.

Lösung 2: Hilfstyp mit keyof (Fortgeschritten, aber mit Einschränkungen)

TypeScript bietet den Operator keyof, der eine Vereinigung von Schlüsseln (Union Type) zurückgibt. Aber wie verwandelt man diese Vereinigung in ein String-Array? Im Jahr 2025 erfordert dies immer noch einen kleinen Trick.

Der klassische Weg ist die Verwendung einer Hilfsfunktion, die die Typen während der Kompilierung überprüft:

// Hilfsfunktionfunction getKeys<T>(obj: T): (keyof T)[] {  return Object.keys(obj) as (keyof T)[];}

// Verwendunginterface Product {  title: string;  price: number;  inStock: boolean;}

const product: Product = {  title: 'Tastatur',  price: 100,  inStock: true};

const productKeys = getKeys(product);// Typ: ("title" | "price" | "inStock")[]console.log(productKeys); // ['title', 'price', 'inStock']

Wichtig: Diese Methode funktioniert nur, wenn Sie ein tatsächliches Objekt haben, das dem Interface entspricht. Wenn Sie nur das Interface, aber kein Objekt haben, müssen Sie eines erst