ProgrammatieFrontend ontwikkelaar

Hoe werkt de strict null en undefined parameter — strictNullChecks in TypeScript? Hoe beïnvloedt het inschakelen ervan de dagelijkse programmering?

Slaag voor sollicitatiegesprekken met de Hintsage AI-assistent

Antwoord

De parameter strictNullChecks bepaalt of TypeScript null en undefined als aparte types beschouwt of niet. Als de parameter is uitgeschakeld (standaard tot versie 2.0), kunnen variabelen van elk type waarden null en undefined aannemen zonder compilatiefouten. Als het is ingeschakeld (strictNullChecks: true), worden deze waarden als incompatibel met andere types beschouwd, tenzij dit expliciet is aangegeven.

Voorbeeld:

// strictNullChecks: false let name: string = null; // OK // strictNullChecks: true let title: string = null; // Fout! let title2: string | null = null; // OK, expliciete type-unie

Het inschakelen van strikte controle helpt fouten in de vroege ontwikkelingsfasen te voorkomen, wanneer functies/methoden niet rekening houden met de mogelijkheid om null of undefined te ontvangen.

Vervelende vraag

Mag je een variabele van type number de waarde undefined toewijzen bij ingeschakelde strictNullChecks?

Antwoord: Nee, als strictNullChecks is ingeschakeld, mag je een variabele van type number geen undefined toewijzen — alleen als je het type expliciet declareert als number | undefined.

Voorbeeld:

let count: number = undefined; // TS Fout bij strictNullChecks: true let count2: number | undefined = undefined; // OK

Voorbeelden van echte fouten door onbekendheid met de details van het onderwerp.


Verhaal

In een groot node.js-project schakelden de ontwikkelaars de strikte controle op null/undefined uit voor "gemakkelijkere migratie". Als gevolg daarvan gaf één van de API-functies een jaar na de lancering undefined terug in plaats van een numerieke waarde. De clientcode was hier niet op voorbereid, waardoor de applicatie aan de gebruikerskant fatale fouten vertoonde bij een eenvoudige berekening response.count + 1.


Verhaal

In een ecommerce-project kwam de productcollectie als null van de server in plaats van []. De UI-component maakte een map over deze producten en riep bij elke instantie een eigenschap aan — dit leidde tot een renderfout. Het inschakelen van strictNullChecks onthulde bijna 40 vergelijkbare plekken direct.


Verhaal

In een grote bibliotheek werd in de loop van de tijd het aantal "toegestane" waarden voor sommige props van de component API string | null | undefined. Dit leidde tot een reeks onopgeloste situaties. Na het inschakelen van strictNullChecks konden niet-voor-de-hand-liggende bugs worden opgevangen die de interface bij specifieke configuraties lieten crashen.