来自现有变量的相当于 PropTypes.oneOf 的打字稿答案

【问题标题】：Typescript equivalent of PropTypes.oneOf, from existing variable来自现有变量的相当于 PropTypes.oneOf 的打字稿
【发布时间】：2019-07-20 23:13:19
【问题描述】：

我知道在What is the TypeScript equivalent of "PropTypes.oneOf" (restrict a variable to subset of values) 中已对此进行了问答，但我有一个案例，我觉得答案还不能解决我的问题。

我正在将一个项目从 JavaScript 转换为 Typescript。在一个 React 组件中，导入了一个 JSON 文件。组件中的一个 props 必须是这个 JSON 的 key 之一：

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 文件导入的变量。通常，我会使用字符串文字的联合或枚举类型。在这种情况下我有什么选择？

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

【问题讨论】：

我也有同样的问题。我尝试了type myPropType = keyof typeof myData，它起初似乎有效：myPropType 是所有关键字符串的联合。但是当我在组件接口中使用这种类型时，它不能正确地进行类型检查。使用时，编译器提示告诉我 prop 的类型为 'string' | '号码' | '符号'。

标签： javascript reactjs typescript react-proptypes

【解决方案1】：

假设 iconNames 是一个数组，这个 StackOverflow 答案应该会有所帮助：Typescript derive union type from tuple/array values

基本上，当您定义iconNames 时，同时定义类型：

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

【讨论】：

我对我的问题进行了编辑，将iconNames 更改为dataKeys，这确实是一个字符串数组。我复制了实际的生产代码，忘记匿名化那条特定的行……我的错。无论如何，我很高兴听到这个功能最近被添加到 Typescript。谢谢。
对不起....我刚刚意识到这个答案对我的情况没有帮助，因为我正在使用Object.keys() 从另一个文件的导入中构建数组。 const 上下文不能与这些“动态数组”一起使用，它只能与静态数组字面量一起使用。