declare in TypeScript: Wozu es dient und wie man es verwendet

Wozu braucht TypeScript das Schlüsselwort declare?

Stellen Sie sich vor, Sie bauen ein Haus, aber einige Räume existieren bereits – sie wurden von jemand anderem gebaut (z. B. einer JavaScript-Bibliothek). Sie können nicht hineingehen und die Wände neu ziehen, aber Sie müssen den Grundriss kennen, um die Möbel richtig zu platzieren. Genau diese Rolle übernimmt das Schlüsselwort declare in TypeScript.

Wenn Sie jemals mit gängigen Bibliotheken (jQuery, Lodash, D3.js) gearbeitet haben, sind Sie bestimmt auf Dateien mit der Endung .d.ts gestoßen – das sind die "Grundrisse", die mit declare erstellt wurden. In diesem Artikel schlüsseln wir auf, was declare ist, wozu es dient und wie man es in der Praxis einsetzt. Machen Sie sich bereit – es gibt viel Code und wenig Fülltext.

Was ist declare in TypeScript?

declare ist ein Schlüsselwort, das dem TypeScript-Compiler mitteilt: "Hey, dieses Ding (Variable, Funktion, Klasse oder Modul) existiert, ist aber woanders definiert. Glaub mir einfach und lass mich es im Code verwenden."

Wichtig zu verstehen: declare erzeugt keinen JavaScript-Code. Es ist eine reine Informationsstruktur für den Compiler. Wenn Sie declare const x: number = 5 schreiben, verschwindet x nach der Kompilierung – es wird nicht in der endgültigen Datei vorhanden sein.

Wann wird es benötigt?

\n
• Arbeit mit globalen Variablen – z. B. window, document oder Variablen, die über ein CDN hinzugefügt wurden.
\n
• Typisierung von JavaScript-Bibliotheken – wenn die Bibliothek in reinem JS geschrieben ist, Sie sie aber mit TypeScript verwenden möchten.
\n
• Erstellung von Typen für Konfigurationsdateien – CSS-Module, Bilder, JSON-Dateien.
\n

Syntax von declare: Grundlegende Beispiele

1. Deklaration von Variablen

Angenommen, Sie haben eine globale Variable VERSION, die in einer HTML-Datei über <script> definiert ist. TypeScript weiß nichts davon, also schreiben Sie:

declare const VERSION: string;\n\nconsole.log(VERSION); // OK, TypeScript weiß, dass es ein String ist\n

Nach der Kompilierung verschwindet declare const VERSION: string, aber console.log(VERSION) bleibt erhalten.

2. Deklaration von Funktionen

Stellen Sie sich vor, Sie haben eine globale Funktion trackEvent aus dem Analytics-Bereich:

declare function trackEvent(eventName: string, properties?: Record<string, any>): void;\n\n// Verwendung\ntrackEvent("button_click", { buttonId: "submit" });\n

Der Compiler prüft nicht die Implementierung – er kennt nur die Signatur.

3. Deklaration von Klassen

Eine Bibliothek stellt die Klasse Moment im globalen Namensraum bereit:

declare class Moment {\n    constructor(date: string);\n    format(pattern: string): string;\n}\n\n// Verwendung\nconst now = new Moment("2024-01-01");\nconsole.log(now.format("YYYY-MM-DD"));\n

4. Deklaration von Modulen

Dies ist das häufigste Szenario. Zum Beispiel haben Sie CSS-Module oder JSON-Dateien:

// styles.d.ts\ndeclare module "*.css" {\n    const styles: Record<string, string>;\n    export default styles;\n}\n\n// images.d.ts\ndeclare module "*.png" {\n    const src: string;\n    export default src;\n}\n

Jetzt können Sie CSS und Bilder ohne TypeScript-Fehler importieren.

declare und .d.ts-Dateien

Dateien mit der Endung .d.ts (Typdeklarationen) sind die "Heimat" des Schlüsselworts declare. Sie enthalten nur Deklarationen und werden nicht in JavaScript kompiliert. Normalerweise befinden sie sich im Ordner types/ oder werden zusammen mit der Bibliothek ausgeliefert (z. B. @types/lodash).

Beispiel: Typen für jQuery erstellen