我有两份文件,

App.tsx:

const data = {games:{type: [], sport: [], category: []}}

以上是我收到的动态数据.

我需要将上述类型的key of datpe.Games设置为有效的类型,

type Valid = keyof typeof data.games

如果它是相同的文件,则不会像上面那样分配问题.

但我有单独的类型文件,比如,

Apptype.ts

// How can I make the below keyof typeof [dynamicName] ?
export type Valid = keyof typeof data.games;

export interface IOption {
  id: number;
  value: string;
  valid: Record<Valid, number[]>;
}

在上面的文件data.games中抛出错误,因为在该文件中不会有这样的变量名.

那么,如何将动态值指定为keyof typeof [.....]呢?

Working Example:

Edit disable-dependent-dropdown-option-in-reactjs (forked)

推荐答案

您可以从App.tsx中导出和导入数据.从Apptype.ts个导入类型,并使用

App.tsx:

import type { IOption, IState } from "./Apptype";
// ...

Apptype.ts

import { data } from "./App";

export interface IState {
  [key: string]: number;
}

export type Valid = keyof typeof data.games;

export interface IOption {
  id: number;
  value: string;
  valid: Record<Valid, number[]>;
}

codesandbox

Javascript相关问答推荐

我们如何从一个行动中分派行动

无法从NextJS组件传递函数作为参数'

JSDoc创建并从另一个文件导入类型

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

如何将数组用作复合函数参数?

将异步回调转换为异步生成器模式

搜索功能不是在分页的每一页上进行搜索

在VS代码上一次设置多个变量格式

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

Next.js中的服务器端组件列表筛选

将嵌套数组的元素乘以其深度,输出一个和

AG-GRIDreact 显示布尔值而不是复选框

Plotly.js栏为x轴栏添加辅助文本

更新文本区域行号

在传单的图像覆盖中重新着色特定 colored颜色 的所有像素

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

Qualtrics联合实验脚本随机化条件

呈现其他组件时无法更新组件.要定位错误的setState()调用,请遵循堆栈跟踪,如下所述

如何将类列表切换应用到具有相同类的多个按钮?

更改垫子树界面线条边框底部问题的方向设计Angular