typescript - Hur man använder den delvis beräknade egenskapsnamnet i en typdefinition

Jag behöver definiera typen för en React-komponent som tar emot en prop name (som ska vara ett värde av Fields) och alla andra props.

Så jag försökte något liknande

type Fields = 'address' | 'recipientName' | 'recipientPhone';

type Props = {
  name: Fields
  [key in string]: any // error here
};

Men det fungerar inte. Jag får detta felmeddelande:

Ett beräknat egenskapsnamn i en typliteral måste referera till ett uttryck vars typ är en literaltyp eller en 'unik symbol'-typ.

Hur kan jag skapa den här typen?

Svar #1

Du använder syntaxen för mappade typer, inte den vanliga ordbokssyntaxen. Prova detta:

type Fields = 'address' | 'recipientName' | 'recipientPhone';

type Props = {
  name: Fields
  [key: string]: any // All good
};

Det är antagligen vad du letar efter. Men om du faktiskt ville använda mappade typer av någon anledning, plus separata nycklar, behöver du definiera två typer och göra en snittning av dem, så här:

type Fields = 'address' | 'recipientName' | 'recipientPhone';

type Props = {
  name: Fields
} & {
  [key in string]: any // All good
};

Du behöver bara det om key in string eller any kommer att bli något mer komplicerat dock.