TypeScript Dictionaries meistern: Indexsignaturen und Record-Typen

Key Takeaways

1. TypeScript-Dictionaries werden mit Indexsignaturen oder dem Utility-Typ Record<K, V> definiert.
2. Die Verwendung spezifischer Schlüsseltypen mit Record verbessert die Typsicherheit und die IDE-Unterstützung.
3. Iteration und Unveränderlichkeit sind wichtige Aspekte bei der Arbeit mit Dictionaries.

TypeScript, eine Obermenge von JavaScript, bringt leistungsstarke Funktionen zur Typüberprüfung in die JavaScript-Entwicklung. Eine häufig verwendete Datenstruktur ist das Dictionary, auch Map oder Objekt mit dynamischen Schlüsseln genannt. Dieser Artikel untersucht, wie man Dictionaries in TypeScript definiert und verwendet, einschliesslich Best Practices und typsichere Muster.

Was ist ein Dictionary in TypeScript?

In TypeScript ist ein Dictionary typischerweise ein Objekt, das zum Speichern von Schlüssel-Wert-Paaren verwendet wird, wobei die Schlüssel normalerweise Strings (oder manchmal Zahlen) sind und die Werte von beliebigem Typ sein können.

Zum Beispiel:

const scores: { [key: string]: number } = {
  Alice: 95,
  Bob: 82,
  Charlie: 78
};

In diesem Fall ist scores ein Dictionary, in dem die Schlüssel Studentennamen (Strings) und die Werte ihre numerischen Punktzahlen sind.

Definieren eines Dictionary-Typs

Sie können einen wiederverwendbaren Dictionary-Typ auf verschiedene Arten definieren:

1. Verwenden einer Indexsignatur

type StringToNumberMap = {
  [key: string]: number;
};

const ages: StringToNumberMap = {
  John: 30,
  Jane: 25
};

Dieser Ansatz ist flexibel, schränkt aber die möglichen Schlüssel nicht ein, was Tippfehler ermöglichen kann.

2. Verwenden eines Record Utility-Typs

TypeScript bietet einen eingebauten Record<K, V> Utility-Typ:

const userRoles: Record<string, string> = {
  admin: 'full-access',
  guest: 'read-only'
};

Wenn die Schlüssel bekannt und fest sind, ist es besser, spezifische String-Literale zu verwenden:

type UserRole = 'admin' | 'guest';

const userPermissions: Record<UserRole, string> = {
  admin: 'all',
  guest: 'limited'
};

Dies bietet eine bessere Typsicherheit und IDE-Autocomplete-Unterstützung.

Optionale und schreibgeschützte Dictionary-Werte

Sie können Werte als optional oder schreibgeschützt markieren:

type UserSettings = {
  [key: string]: string | undefined;
};

const settings: UserSettings = {
  theme: 'dark',
  language: undefined
};

Oder mit Record:

type FeatureFlags = Record<string, boolean | undefined>;

Für schreibgeschützte Dictionaries:

const config: Readonly<Record<string, string>> = {
  version: '1.0.0',
  env: 'production'
};

Iterieren über ein Dictionary

Sie können wie folgt über die Schlüssel eines Dictionary iterieren:

for (const key in scores) {
  if (scores.hasOwnProperty(key)) {
    console.log(`${key}: ${scores[key]}`);
  }
}

Oder mit Object.entries() für bessere Kontrolle:

Object.entries(scores).forEach(([name, score]) => {
  console.log(`${name}: ${score}`);
});

Häufige Anwendungsfälle

• Zwischenspeichern von Daten nach ID
• Zählen der Worthäufigkeit
• Konfigurationsoptionen
• Zuordnung zwischen Enums und Strings

Fazit

Dictionaries in TypeScript sind eine vielseitige und essentielle Datenstruktur. Durch die Verwendung von Indexsignaturen oder des Record Utility-Typs können Sie flexible und typsichere Dictionaries erstellen, die sich gut in das statische Typsystem von TypeScript integrieren. Das Verständnis der Nuancen von Dictionary-Typen hilft Ihnen, robustere und wartbarere Codes zu schreiben.

FAQs

Was ist der Unterschied zwischen Indexsignaturen und Record in TypeScript?

Indexsignaturen ermöglichen dynamische Schlüssel, während Record eine strengere Typisierung mit vordefinierten Schlüsseln bietet.

Wie mache ich ein TypeScript-Dictionary schreibgeschützt?

Umschliessen Sie den Dictionary-Typ mit Readonly<Record<K, V>>, um die Wertänderung zu verhindern.

Können Dictionary-Werte in TypeScript optional sein?

Ja, Sie können string | undefined für Werte verwenden oder diese mit ? als optional definieren.

We are Leapcell, your top choice for hosting Node.js projects.

Leapcell is the Next-Gen Serverless Platform for Web Hosting, Async Tasks, and Redis:

Multi-Language Support

• Develop with Node.js, Python, Go, or Rust.

Deploy unlimited projects for free

• pay only for usage — no requests, no charges.

Unbeatable Cost Efficiency

• Pay-as-you-go with no idle charges.
• Example: $25 supports 6.94M requests at a 60ms average response time.

Streamlined Developer Experience

• Intuitive UI for effortless setup.
• Fully automated CI/CD pipelines and GitOps integration.
• Real-time metrics and logging for actionable insights.

Effortless Scalability and High Performance

• Auto-scaling to handle high concurrency with ease.
• Zero operational overhead — just focus on building.

Explore more in the Documentation!

Follow us on X: @LeapcellHQ