TypeScript module-augmentatie en omgaan met geneste JavaScript-bestanden
Leer de basisprincipes van module-augmentatie in TypeScript en hoe je type-definities kunt toevoegen voor 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.