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.
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:
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.
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.
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.