相當於PropTypes.oneOf的打字稿，來自現有變量

Question

我知道這在“ PropTypes.oneOf”的TypeScript等效項（將變量限制為值的子集）中被問與答，但是我有一種情況，我覺得答案不能解決我的問題然而。

我正在將項目從JavaScript轉換為Typescript。 在一個React組件中，導入了一個JSON文件。 組件中的道具之一必須是此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,
  ...
}

現在，我想將MyComponent轉換為Typescript，因此我將刪除PropTypes並基於現有propTypes創建一個Props接口。 問題是，我不確定如何轉換基於現有變量構建的PropTypes.oneOf ，尤其是依賴於JSON文件導入的變量。 通常，我將使用字符串文字或枚舉類型的並集。 在這種情況下，我有什么選擇？

是的，我在allowSyntheticDefaultImports啟用了tsconfig.json 。

Answer 1

假設iconNames是一個數組，此StackOverflow答案應有幫助： Typescript從元組/數組值中獲取聯合類型。

基本上，當您定義iconNames ，請同時定義類型：

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