TypeScript-Modulerweiterung und Umgang mit verschachtelten JavaScript-Dateien

TypeScript ist seit über einem Jahrzehnt eine wertvolle Ergänzung zum JavaScript-Ökosystem und hat an Popularität gewonnen, weil es die Möglichkeit bietet, Typensicherheit für JavaScript-Code bereitzustellen.

Typen für JavaScript-Pakete#

Für Rückwärtskompatibilität und Flexibilität ermöglicht TypeScript es Paketautoren, Typdefinitionen für ihre JavaScript-Pakete bereitzustellen. Solche Typdefinitionen werden normalerweise im Repository "DefinitelyTyped" gespeichert. Du kannst den @types-Scope verwenden, um diese Typdefinitionen zu installieren, z.B. @types/react ist die Typdefinition für das React-Paket.

Nach der Installation dieser Typdefinitionen kannst du das Paket mit Vertrauen in die Typensicherheit verwenden. Hier ist ein Beispiel für die Definition einer React-Komponente mit Typensicherheit:

Modulerweiterung#

Während die meisten beliebten JavaScript-Pakete fertige Typdefinitionen im @types-Scope haben, können einige Pakete keine Typdefinitionen haben oder veraltete Definitionen aufweisen. In solchen Fällen bietet TypeScript ein leistungsstarkes Feature namens "Modulerweiterung" an, um Typdefinitionen für diese Pakete hinzuzufügen. Schauen wir uns ein Beispiel an:

Jetzt kannst du diese erweiterte Typdefinition in deinem Code verwenden:

Die Modulerweiterung ermöglicht es nicht nur, Typdefinitionen für Pakete hinzuzufügen, sondern auch vorhandene Typdefinitionen zu erweitern. Zum Beispiel kannst du eine neue Eigenschaft zum window-Objekt hinzufügen:

Und diese in deinem Code verwenden:

In einem früheren Beitrag haben wir über ein Typenproblem in der React Router-Bibliothek gesprochen und mussten dieses Problem durch das Erweitern und Ergänzen der vorhandenen Typen über eine benutzerdefinierte Deklarationsdatei überwinden.

Denke daran, dass es bei der Verwendung von Modulerweiterungen entscheidend ist, die Genauigkeit deiner Typdefinitionen sicherzustellen, indem du den JavaScript-Quellcode genau überprüfst. Falsche Typdefinitionen können zu Laufzeitfehlern führen. Im obigen Beispiel muss die window.foo-Eigenschaft ein String sein, der im window-Objekt existiert.

Globale Erweiterung#

Manchmal kannst du auf Skripte stoßen, die globale Variablen einführen, und du möchtest möglicherweise Typdefinitionen für diese globalen Variablen bereitstellen, um sie in deinem TypeScript-Code zu verwenden. Wenn du beispielsweise ein Skript hast, das eine globale Variable namens __DEV__ setzt:

Du kannst Typdefinitionen für diese globale Variable wie folgt hinzufügen:

Jetzt kannst du es in deinem TypeScript-Code verwenden:

Durch die Kombination von Modulerweiterung und globaler Erweiterung kannst du sogar Typdefinitionen für JavaScript-Prototypen erweitern. Dies wird jedoch im Allgemeinen nicht empfohlen, da dies den globalen Gültigkeitsbereich verschmutzen kann.

Die Kraft der Modulerweiterung ermöglicht solche Erweiterungen, aber sei vorsichtig, um eine Verschmutzung des globalen Gültigkeitsbereichs zu vermeiden.

Verschachtelte JavaScript-Dateien#

In den oben genannten Beispielen sind wir davon ausgegangen, dass Importe über die Entry-Datei des Pakets aufgelöst werden können. Einige Pakete exportieren jedoch verschachtelte JavaScript-Dateien ohne entsprechende Typdefinitionen. Betrachten wir ein Paket namens foo mit folgender Struktur:

Das foo-Paket exportiert die index.js-Datei als Einstiegspunkt und exportiert auch das bar-Verzeichnis.

Um die Typdefinitionen für das foo-Paket zu erweitern, kannst du eine foo.d.ts-Datei erstellen:

Wenn du jedoch versuchst, die baz.js-Datei in TypeScript zu importieren, erhältst du einen Fehler:

Um die Typdefinitionen für die baz.js-Datei zu erweitern, musst du eine separate baz.d.ts-Datei erstellen:

Dies stellt sicher, dass TypeScript das Modul und die zugehörigen Typdefinitionen finden kann:

Um organisierte Typdefinitionen beizubehalten, kannst du die Paketstruktur in deinen Typdefinitionsdateien nachahmen:

Dieser Ansatz hält deinen TypeScript-Code strukturiert und typsicher, selbst wenn du mit verschachtelten JavaScript-Dateien arbeitest.