Definere flere kartlagte typer i TypeScript?

Si at jeg har følgende TypeScript-kode:

type fruit = "apple" | "banana" | "pear"
type color = "red" | "yellow" | "green"

Og jeg vil lage en type som har en numerisk egenskap for hver frukt og en boolsk egenskap for hver farge, noe sånt som

type FruitsAndColors = {
  [key in fruit]: number;
  [key in color]: boolean
}

Dessverre feiler dette med meldingen "En kartlagt type kan ikke erklære egenskaper eller metoder", men det kompilerer fint. Hva skjer egentlig her?

Jeg kan komme rundt dette med noe som

type FruitsAndColors = {
  [key in fruit]: number;
} & {
  [key in color]: boolean
}

Men jeg vil gjerne vite hva det egentlige problemet er.

Svar #1

Det er ikke «VScodes TypeScript-utvidelse», det er TypeScript. Den lar deg ikke gjøre to mappings i en enkelt type-konstruksjon. Det er bare syntaksen til konstruksjonen som ikke tillater det.

I stedet gjør du det du viste:

type FruitsAndColors = {
    [key in fruit]: number;
} & {
    [key in color]: boolean
};

Merk imidlertid at den typen krever at alle seks egenskapene er til stede i objektet. Kanskje det er det du vil, men hvis ikke, legg til ? etter de kartlagte nøklene (eller pakk hele greia inn i Partial<>):

type FruitsAndColors = {
    [key in fruit]?: number;
} & {
    [key in color]?: boolean
};
// Or
type FruitsAndColors = Partial<{
    [key in fruit]: number;
} & {
    [key in color]: boolean
}>;

Lekeplass for det ovennevnte

Svar #2

Du kan også bruke betingede typer:

type FruitsAndColors = Partial<{
  [Key in (Fruit | Color)]: Key extends Fruit ? number : Key extends Color ? boolean : never;
}>

Lekeplass