Antwoord

TypeScript ondersteunt nauwkeurige typisering van functies met behulp van rest-parameters en destructurering. Dit is vooral belangrijk voor functies die een variabel aantal argumenten of complexe objecten accepteren.

Destructurering in de parameters van een functie maakt het mogelijk om de structuur van de verwachte eigenschappen expliciet aan te geven:

function printUser({ name, age }: { name: string; age: number }) {
  console.log(`${name} (${age})`);
}

Rest-parameters maken het mogelijk om een variabel aantal argumenten en hun type op te geven:

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

Gecombineerd gebruik komt voor in functies die een hoofdobject en een extra parameter array accepteren:

function logEvent(event: { type: string }, ...meta: any[]) {
  console.log(event.type, meta.join(','));
}

Correcte typisering maakt het mogelijk om fouten vóór de uitvoering van de code te identificeren, maar onjuiste typisering leidt tot verlies van typeveiligheid en fouten tijdens runtime.

Vraag met een addertje onder het gras

Hoe geef je een type op voor een functie met destructurering parameters die standaardwaarden hebben en deze optioneel maken?

Veel mensen geven het type van het object op, maar vergeten elk veld optioneel te maken of standaardwaarden tegelijkertijd met het type op te geven:

function foo({x = 1, y = 2}: {x?: number; y?: number} = {}) {
  console.log(x, y);
}

Hier zijn standaardwaarden opgegeven en zijn alle parameters optioneel gemaakt met behulp van ?. Zonder dit zal aanroepen zonder parameters een fout veroorzaken, terwijl een standaardwaarde wordt verwacht.

Voorbeelden van echte fouten door onwetendheid over de nuances van het onderwerp

---

Verhaal

In een project tijdens de migratie van een functie met parameters van JavaScript naar TypeScript werd het type alleen voor het object opgegeven, en niet voor de afzonderlijke velden. Dit leidde ertoe dat het aanroepen van de functie zonder parameters resulteerde in een aplicatiefout met een destructureringsfout: undefined heeft geen eigenschap name.

Verhaal

Bij het werken met rest-parameters werd vergeten om het type van de array expliciet op te geven. In de functie was het type any[], wat inderdaad de overdracht van niet alleen getallen toestond. Op de productieomgeving somden we plotseling getallen en strings op, wat resulteerde in onjuiste resultaten in rapporten.

Verhaal

We gebruikten destructurering met een diep genest object, maar vergaten om de geneste types op te geven. Hierdoor "raakte TS de weg kwijt" en gaf het niet aan dat een verplicht veld ontbrak in de objecten, wat leidde tot een TypeError: Cannot read property 'id' of undefined aan de clientzijde.