定义嵌套对象的类型 - TS答案

【问题标题】：Define types for a nested object - TS定义嵌套对象的类型 - TS
【发布时间】：2020-09-30 00:14:00
【问题描述】：

我有一个 URL 对象。通过按下按钮请求 URL。我有 3 个按钮：Input、Output 和 StandardReport。

StandardReport 将打开一个窗口，其中包含 3 个按钮，分别名为 Define、Validate 和 Refresh。

export interface StandardReport {
    define: string;
    validate: string;
    refresh: string;
}


interface GeneratedFilesURL {
  inputs: string;
  outputs: string;
  standardReport: StandardReport;
}

export const GENERATED_FILES_URL: GeneratedFilesURL = {
  inputs: '/generated_files/input_consolidation',
  outputs: '/generated_files/output_consolidation',
  standardReport: {
    define: '/generated_files/standard_report_define',
    validate: '/generated_files/standard_report_validate',
    refresh: '/generated_files/standard_report_refresh',
  },
};

export type Source = 'inputs' | 'outputs' | StandardReport;

我使用GENERATED_FILES_URL[source] 访问URL，其中source 可以是inputs 或outputs，我得到Type 'StandardReport' cannot be used as an index type. 以及GENERATED_FILES_URL.standardReport.define 或GENERATED_FILES_URL.standardReport.validate .

你能帮我弄清楚确切的类型结构吗？

Playground link

请导航到错误选项卡以获取错误

【问题讨论】：

标签： typescript types

【解决方案1】：

对于您的Source 类型，您实际上想要拥有类似export type Source = keyof GeneratedFilesURL 的东西；

对于您的界面（因为您想通过字符串查找），最简单的方法是从 Record 扩展它

interface GeneratedFilesURL extends Record<sting, any> {
    ....
}

然后你就可以轻松地做你想做的事了；

export const myType: Source = 'standardReport';
const bla = GENERATED_FILES_URL[myType].define

【讨论】：

这实际上解决了很多问题。谢谢你。我有另一个名为 selection 的变量，它是一个对象，它接受一个只能是“输入”或“输出”的源值。我收到此错误：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引“状态”类型。
selection 有一个名为 State 的类型，它是 export interface State { scenario: number[];输出：数字[]；输入：数字[]；标准报告：数字[]；时间尺度：字符串[]；维度实例：数字[]；维度空白：数字[]； }
请创建replicable test bed
Here it is。在这里工作得很好，但在 UI 上出现选择错误。TS7053：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“状态”。在“State”类型上找不到带有“string”类型参数的索引签名。
该链接不起作用。似乎您已将选择索引定义为字符串（而不是 Source）