Antwoord.

Achtergrond van de vraag:

Spread (...) en Rest (...) zijn enkele van de populairste moderne syntactische constructies die uit ES6 zijn voortgekomen. In TypeScript hebben ze type-striktheid gekregen, waardoor het gebruik van Spread en Rest niet alleen handig, maar ook veilig is, als de typebeperkingen correct worden nageleefd.

Probleem:

Spread- en Rest-operatoren worden een bron van fouten als het type van de waarden niet in overweging wordt genomen of als incompatibele types worden gemengd (bijvoorbeeld als objecten met incompatibele eigenschappen of arrays van verschillende types worden samengevoegd).

Oplossing:

In TypeScript wordt Spread gebruikt voor het kopiëren of samenvoegen van de eigenschappen van objecten en de elementen van arrays. Rest maakt het mogelijk om "overgebleven" elementen in een functie of array te verzamelen, terwijl strikte typecontrole incompatibele gevallen controleert, waardoor fouten tijdens de compilatie worden voorkomen.

Voorbeeldcode:

// Spread met objecten
const base = { a: 1, b: 2 };
const extended = { ...base, c: 3 };
// extended: { a: number; b: number; c: number }

// Rest in functieparameters
function sum(...args: number[]): number {
  return args.reduce((acc, val) => acc + val, 0);
}

// Spread in arrays
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

Belangrijke kenmerken:

Spread zorgt voor het kopiëren van eigenschappen/elementen met typecompatibiliteitscontrole
Rest garandeert een strikte type van de resterende parameters
Typefouten bij onjuiste samenvoegingen worden al tijdens de compilatie opgevangen

Vragen met een valstrik.

Wat is het verschil tussen het kopiëren van een object via Spread en toewijzing op basis van verwijzing?

Spread creëert een nieuw object met een kopie van alle enumerabele eigenschappen, maar als het object geneste objecten bevat, worden deze gekopieerd op basis van verwijzing (shallow copy).

const base = { a: 1, nested: { x: 2 } };
const copy = { ...base };
copy.nested.x = 42;
console.log(base.nested.x); // 42

Kan je met Spread alleen bepaalde eigenschappen kopiëren?

Nee, Spread kopieert alle enumerabele eigenschappen van een object. Voor het selecteren van specifieke eigenschappen wordt destructurering gebruikt:

const { a, ...rest } = { a: 1, b: 2, c: 3 };
// rest: { b: 2, c: 3 }

Wat gebeurt er als je twee objecten met dezelfde eigenschappen via Spread samenvoegt? Hoe beïnvloedt dit de typecontrole?

Eigenschappen van het laatste object overschrijven de eigenschappen van de voorgaande objecten. Het type van de laatste eigenschap wordt als definitief beschouwd:

const a = { val: 1 };
const b = { val: 'hello' };
const merged = { ...a, ...b };
// merged: { val: string } (en niet number)

Typefouten en anti-patronen

Gebruik Spread voor diepe kloning van geneste objecten, hoewel dit alleen "shallow copy" is
Onjuiste typebepaling van restparameters (vermelding van type any[] in plaats van specifiek)
Samenvoegen van objecten met overlappende incompatibele types van eigenschappen

Voorbeeld uit de praktijk

Negatieve casus

In een project werd besloten om configuratieparameters samen te voegen via Spread. Een van de objecten had de eigenschap timeout: number, het andere — timeout: string. Er werden geen fouten opgemerkt tot runtime, totdat de functie faalde vanwege een verkeerd type.

Voordelen:

Snel gerealiseerd in een paar regels

Nadelen:

Typefouten zijn niet zichtbaar als het type expliciet is ingesteld op: any
Gevaren bij het overschrijven van eigenschappen

Positieve casus

Er werd getypeerde Spread gebruikt voor het samenvoegen van strikte interfaces, evenals destructurering voor het scheiden van onnodige velden. Fouten werden onmiddellijk door de compiler vastgesteld.