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](https://github.com/DefinitelyTyped/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: ```tsx import React from 'react'; type Props = { name: string; }; const Hello: React.Component = ({ name }) => { return

Hallo, {name}!

; }; ``` ## 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](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)" om type-definities toe te voegen voor deze pakketten. Laten we een voorbeeld bekijken: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Nu kun je deze aangevulde type-definitie in je code gebruiken: ```ts import { foo } from 'foo'; console.log(foo); // `foo` is een string ``` 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: ```ts // src/types/window.d.ts interface Window { foo: string; } ``` En gebruik het in je code: ```ts console.log(window.foo); // `foo` is een string ``` In een [vorig bericht](/react-router-lazy-type-handling/), 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: ```html ``` Je kunt type-definities toevoegen voor deze globale variabele als volgt: ```ts // src/types/global.d.ts declare const __DEV__: boolean; ``` Nu kun je het in je TypeScript-code gebruiken: ```tsx if (__DEV__) { // ... } ``` 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. ```ts // src/types/global.d.ts declare global { interface Array { first(): T; } } ``` ```ts // src/helpers/array.ts Array.prototype.first = function () { return this[0]; }; ``` 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: ``` foo/ package.json index.js bar/ index.js baz.js ``` 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: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Echter, als je probeert om het `baz.js`-bestand in TypeScript te importeren, krijg je een foutmelding: ```ts import { baz } from 'foo/bar/baz.js'; // Kan module 'foo/bar/baz.js' of bijbehorende typedeclaraties niet vinden. ``` Het voorbeeld gaat ervan uit dat we ES-modules gebruiken. Om de type-definities voor het `baz.js`-bestand uit te breiden, moet je een apart `baz.d.ts`-bestand maken: ```ts // src/types/foo/index.d.ts declare module 'foo' { export const foo: string; } // src/types/foo/bar/baz.d.ts declare module 'foo/bar/baz.js' { export const baz: string; } ``` Dit zorgt ervoor dat TypeScript de module en de bijbehorende type-definities kan lokaliseren: ```ts import { baz } from 'foo/bar/baz.js'; console.log(baz); // `baz` is een string ``` Om georganiseerde type-definities te behouden, kun je de structuur van het pakket nabootsen in je type-definitiebestanden: ``` src/ types/ foo/ index.d.ts bar/ baz.d.ts ``` Deze aanpak houdt je TypeScript-code gestructureerd en type-veilig, zelfs wanneer je met geneste JavaScript-bestanden werkt. TypeScript zal nog steeds een fout melden als je twee module-augmentaties (`declare module ...`) in hetzelfde bestand plaatst.