javascript - Typescript motsvarighet till PropTypes.oneOf, från befintlig variabel


Jag vet att detta har frågats och besvarats i Vad är TypeScript-ekvivalenten till "PropTypes.oneOf" (begränsa en variabel till en delmängd av värden), men jag har ett fall där jag inte känner att svaret löser mitt problem än.

Jag arbetar med att konvertera ett projekt från JavaScript till TypeScript. I en React-komponent importeras en JSON-fil. En av props i komponenten måste vara en av nycklarna i denna JSON:

import React from "react"
import PropTypes from "prop-types"
import myData from "./myData.json"

const dataKeys = Object.keys(myData)

function MyComponent({myType, ...}) { ... }

MyComponent.propTypes = {
  myType: PropTypes.oneOf(dataKeys).isRequired,
  ...
}

Jag vill nu konvertera MyComponent till Typescript, så jag kommer att ta bort PropTypes och skapa ett Props-gränssnitt baserat på de befintliga propTypes. Grejen är att jag är osäker på hur jag ska konvertera PropTypes.oneOf som bygger på en befintlig variabel, särskilt en som beror på en import av en JSON-fil. Normalt skulle jag använda en union av strängliteral eller en enum-typ. Vilka alternativ har jag i detta fall?

Ja, jag har allowSyntheticDefaultImports aktiverat i tsconfig.json.

Svar #1

Förutsatt att iconNames är en array, bör detta StackOverflow-svar hjälpa: Typescript härleder unionstyp från tuple-/arrayvärden

I grund och botten, när du definierar iconNames, definiera typen tillsammans med den:

const iconNames = ['plus', 'arrow', 'trash'] as const;
type IconNamesType = typeof iconNames[number];