时间戳

首页 > 解决方案 > 来自现有变量的相当于 PropTypes.oneOf 的打字稿

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

问题描述

我知道这已经在什么是 TypeScript 等效于“PropTypes.oneOf”（将变量限制为值的子集）中得到了问答，但我有一个案例，我觉得答案不能解决我的问题然而。

我正在将项目从 JavaScript 转换为 Typescript。在一个 React 组件中，导入了一个 JSON 文件。组件中的 props 之一必须是此 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.

标签： javascriptreactjstypescriptreact-proptypes

解决方案

假设iconNames是一个数组，这个 StackOverflow 答案应该会有所帮助：Typescript 从元组/数组值中派生联合类型

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

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

推荐阅读