TypeScript module-augmentatie en omgaan met geneste JavaScript-bestanden

TypeScript is al meer dan tien jaar een waardevolle aanvulling op het JavaScript-ecosysteem en wint aan populariteit vanwege het vermogen om typeveiligheid te bieden voor JavaScript-code.

Typen voor JavaScript-pakketten#

Voor achterwaartse compatibiliteit en flexibiliteit stelt TypeScript pakketontwikkelaars in staat om type-definities te leveren voor hun JavaScript-pakketten. Dergelijke type-definities worden meestal opgeslagen in de "DefinitelyTyped"-repository. Je kunt de @types-scope gebruiken om deze type-definities te installeren, bijvoorbeeld @types/react is de type-definitie voor het React-pakket.

Na het installeren van deze type-definities kun je het pakket met vertrouwen in typeveiligheid gebruiken. Hier is een voorbeeld van het definiëren van een React-component met typeveiligheid:

Module-augmentatie#

Hoewel de meeste populaire JavaScript-pakketten al beschikbare type-definities hebben in de @types-scope, kunnen sommige pakketten geen type-definities hebben of verouderde. In dergelijke gevallen biedt TypeScript een krachtige functie genaamd "module-augmentatie" om type-definities toe te voegen voor deze pakketten. Laten we een voorbeeld bekijken:

Nu kun je deze aangevulde type-definitie in je code gebruiken:

Module-augmentatie stelt je niet alleen in staat om type-definities toe te voegen voor pakketten, maar breidt ook bestaande type-definities uit. Bijvoorbeeld, je kunt een nieuwe eigenschap toevoegen aan het window object:

En gebruik het in je code:

In een vorig bericht, hebben we gesproken over een typeprobleem in de React Router-bibliotheek, en we moesten de impact overwinnen door het bestaande type uit te breiden en aan te vullen via een aangepast declaratiebestand.

Denk eraan dat wanneer je module-augmentatie gebruikt, het cruciaal is om de nauwkeurigheid van je type-definities te waarborgen door de JavaScript-broncode nauwkeurig te inspecteren. Onjuiste type-definities kunnen leiden tot runtime-fouten. In het bovenstaande voorbeeld moet de window.foo-eigenschap een string zijn die op het window object bestaat.

Globale augmentatie#

Soms kun je scripts tegenkomen die globale variabelen introduceren, en je wilt misschien type-definities leveren voor deze globale variabelen om ze in je TypeScript-code te gebruiken. Bijvoorbeeld, als je een script hebt dat een globale variabele genaamd __DEV__ instelt:

Je kunt type-definities toevoegen voor deze globale variabele als volgt:

Nu kun je het in je TypeScript-code gebruiken:

Door module-augmentatie en globale augmentatie te combineren, kun je zelfs type-definities uitbreiden voor JavaScript-prototypes. Dit wordt echter over het algemeen niet aanbevolen omdat het de globale scope kan vervuilen.

De kracht van module-augmentatie biedt deze uitbreidingen, maar wees voorzichtig om vervuiling van de globale scope te voorkomen.

Geneste JavaScript-bestanden#

In de eerder genoemde voorbeelden namen we aan dat imports konden worden opgelost via het ingangsbord van het pakket. Sommige pakketten exporteren echter geneste JavaScript-bestanden zonder bijbehorende type-definities. Overweeg een pakket genaamd foo met de volgende structuur:

Het foo-pakket exporteert het index.js-bestand als het ingangsbord en exporteert ook de bar-directory.

Om de type-definities voor het foo-pakket toe te voegen, kun je een foo.d.ts-bestand maken:

Echter, als je probeert om het baz.js-bestand in TypeScript te importeren, krijg je een foutmelding:

Om de type-definities voor het baz.js-bestand uit te breiden, moet je een apart baz.d.ts-bestand maken:

Dit zorgt ervoor dat TypeScript de module en de bijbehorende type-definities kan lokaliseren:

Om georganiseerde type-definities te behouden, kun je de structuur van het pakket nabootsen in je type-definitiebestanden:

Deze aanpak houdt je TypeScript-code gestructureerd en type-veilig, zelfs wanneer je met geneste JavaScript-bestanden werkt.