javascript - Konvertering av TypeScript streng-litteral typer til et array av strenger

Jeg har

type ImageVerticalSpacing = 'ignoreBottom' | 'ignoreTop' | 'ignoreBoth' 
| 'Default';

i TypeScript og trenger å sende disse strengene som et array av strenger til en nedtrekksliste. Hvordan kan jeg konvertere typen ImageVerticalSpacing til et array av strenger?

Svar #1

Bygger videre på jcals svar og gjentar: "Du kan ikke konvertere typer i TypeScript til verdier ved kjøretid. Men du kan gjøre det motsatte: lage et objekt ved kjøretid og la TypeScript utlede typen." Det finnes et flott blogginnlegg av @steve-holgado om å bruke const-assertions for dette formålet: https://steveholgado.com/typescript-types-from-arrays/

Med TypeScripts const-erklæringer (TypeScript 3.4+) kan du gjøre:

const animals = ['cat', 'dog', 'mouse'] as const
type Animal = typeof animals[number]

// type Animal = 'cat' | 'dog' | 'mouse'

Så koden for spørsmålet ville se slik ut:

const imageVerticalSpacing = ['ignoreBottom', 'ignoreTop', 'ignoreBoth', 'Default'];
type ImageVerticalSpacing = typeof imageVerticalSpacing[number];

Svar #2

Du kan ikke konvertere typer i TypeScript til verdier under kjøring. Men du kan gjøre det motsatte: lage et objekt under kjøring og la TypeScript utlede typen.

Det ideelle kjøretidsobjektet for dette formålet ville være en tuple. Dessverre infererer ikke TypeScript tuples så godt på egen hånd. Jeg bruker en hjelpefunksjon kalt tuple() som returnerer tuplet-typer.

OPPDATERING: 2018-12, siden TypeScript 3.0 kan tuple()-funksjonen skrives slik:

type Narrowable = string | number | boolean | symbol | 
  object | {} | void | null | undefined;
const tuple = <T extends Narrowable[]>(...args: T)=>args;

Ved å bruke den ovennevnte hjelpefunksjonen, kan du gjøre dette:

const imageVerticalSpacing = tuple('ignoreBottom','ignoreTop','ignoreBoth','Default');

type ImageVerticalSpacing = (typeof imageVerticalSpacing)[number];

Objektet imageVerticalSpacing er et array av strenger du kan bruke for nedtrekksmenyen din, av typen ['ignoreBottom','ignoreTop','ignoreBoth','Default']. Og typen ImageVerticalSpacing er den samme 'ignoreBottom' | 'ignoreTop' | 'ignoreBoth' | 'Default' som du deklarerte.

(Se det i aksjon på lekeplassen)

Håper det hjelper. Lykke til!

Relaterte artikler