TypeScript in een frontend-team is pas volwassen wanneer any uitzondering is, niet het smeermiddel. In Amsterdamse codebases zien wij het omgekeerde: strict staat in tsconfig, en toch lekken any’s via rest-props, via JSON.parse, via “tijdelijke” adapters van drie jaar oud. Dit stuk beschrijft hoe NLCodeCraft Frontend Academy in de TypeScript-track van that-vrij naar productierijpe types toewerkt — zonder te doen alsof de compiler uw architectuur kiest.

De eerste oefening is niet generics. De eerste oefening is: beschrijf de payload zoals hij werkelijk binnenkomt. Null, ontbrekende velden, string-enums die in de praktijk vrije tekst zijn. Wie een User-type met numeriek id schrijft terwijl de API id als string stuurt, heeft types als wens. Wensen vangen geen bugs. In de les forceren wij een adapter: intern een strak type, aan de rand een parse. Of u Zod gebruikt of een handmatige guard is secundair. Primair is dat de UI nooit JSON.parse als User vertrouwt.

De tweede oefening is UI-staat als discriminated union. idle, loading, error, success. Geen boolean isLoading naast een nullable user naast een optional error die stiekem allebei gevuld zijn. React-componenten worden leesbaar wanneer de unie de render afdwingt. Dat is dezelfde discipline als in de React cursus, nu met de compiler als bondgenoot.

Generics komen pas wanneer u duplicatie voelt. Result<T>, Pagina<T>, een List-component met item-render. Wie generics kopieert uit een blog omdat het slim staat, krijgt in de review de vraag: wat is T in uw domein? Als het antwoord “gewoon data” is, was een concreet type beter.

type LoadState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; data: T };

Productierijp betekent ook: third-party types isoleren. Een kapotte definitie van een date-library mag uw app niet gijzelen. Wrapper, smal export-oppervlak, en een commentaar waarom de escape bestaat. @ts-expect-error zonder vervaldatum is in onze checklist een open defect, geen stijl.

Als u dit leest als teamlead: meet niet het aantal any’s met een dashboard alleen. Meet of een rename van een API-veld de UI rood kleurt. Als dat niet gebeurt, was het typesysteem theater. Theater is duur. Craft is goedkoper na sprint twee. Plan de track niet als “een middag TypeScript”; plan hem als het moment waarop uw team stopt met JSON.parse-als-waarheid. Dat gesprek voeren wij liever aan de Wibautstraat met een echte payload erbij dan in een abstracte slide over generics.