Typescript 中的嵌套查找字典

Question

我需要在客户端筛选大量数据，为此，出于性能原因，我希望使用字典。我有以下 JSON 数据结构（有些被截断，因为

Values

和

Styles

可以有更多数据，但这是一个缩短的版本，因此您可以获取图片）：

{
  "StyleNames": [
    "Foo",
    "Bar",
    "Blah"
  ],
  "Styles": {
    "Foo": {
      "Dimensions": {
        "X": {
          "Values": {
            "0": 123,
            "10": 456,
            "50": 789
          }
        },
        "Y": {
          "Values": {
            "0": 123,
            "10": 456,
            "50": 789
          }
        }
      }
    },
    "Bar": {
      "Dimensions": {
        "X": {
          "Values": {
            "0": 123,
            "10": 456,
            "50": 789
          }
        },
        "Y": {
          "Values": {
            "0": 123,
            "10": 456,
            "50": 789
          }
        }
      }
    }
  }
}

我很难正确地获取 TypeScript 类。目标是能够通过如下方式访问给定值：

import data from './data.json';

let lookupData: ILookupData = data;
let value: number =  lookupData.Styles['Foo'].Dimensions['Y'].Values['10'];  // Gets a value of 50

问题出在

let lookupData...

步骤。我得到以下信息（TL;DR 对于这个块：没有任何映射正确）：

“类型 '{ StyleNames: string[]; 样式: { Foo: { 尺寸: { X: { 值：{“0”：数字； “10”：数字； “50”：数字； }; };是：{ 值：{“0”：数字； “10”：数字； “50”：数字； }; }; }; }; 条形：{ 尺寸：{ X：{ 值：{ “0”：数字； “10”：数字； “50”：数字； }; };是：{...； }; }; }; }; }' 不可分配给 输入“ILookupData”。

属性“样式”的类型不兼容。

类型 '{ Foo: { 尺寸: { X: { 值: { "0": 数字; “10”： 数字; “50”：数字； }; }; Y：{值：{“0”：数字； “10”： 数字; “50”：数字； }; }; }; };条形：{ 尺寸：{ X：{ 值： { “0”：数字； “10”：数字； “50”：数字； }; }; Y：{值：{ “0”：数字； “10”：数字； “50”：数字； }; }; }; }; }' 不是 可指定为“IRootStyle”类型。

属性“Foo”与索引签名不兼容。

类型 '{ 尺寸：{ X：{ 值：{ “0”：数字； “10”：数字； “50”：数字； }; }; Y：{值：{“0”：数字； “10”：数字； “50”：数字； }; }; }; }' 不可分配给类型“IStyle”。

属性“维度”的类型不兼容。

输入 '{ X: { 值: { "0": 数字; “10”：数字； “50”：数字； }; }; Y：{值：{“0”：数字； “10”：数字； “50”：数字； }; }; }' 不可分配给类型“Record”。

属性“X”与索引签名不兼容。

键入 '{ 值：{ “0”：数字； “10”：数字； “50”：数字； }; }' 不可分配给类型“IDimension”。

属性“值”的类型不兼容。

输入 '{ "0": 数字; “10”：数字； “50”：数字； }' 不是 可指定输入“Record”。

属性“0”与索引签名不兼容。输入“号码” 不可分配给类型“IValue”。

我花了大约两天的时间尝试了我能找到的与关联数组/字典相关的所有内容，但我无法（并且可能对 TypeScript 缺乏经验）弄清楚如何制作一个在这里工作的接口模型。我目前的型号是这样的：

Record<T,U>

我在这里缺少什么？

Answer 1

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

export interface IDimension {
    Values: Record<string, IValue>
}

export interface IStyle {
    Dimensions: Record<string, IDimension>
}

export interface IRootStyle {
    [Name: string]: IStyle;
}

export interface ILookupData {
    Styles: IRootStyle;
    StyleNames: string[];
}

，那么 TS 就知道 2 个可能的键是“Foo”或“Bar”，并且可以键入检查。

诀窍是放弃记录并使用索引签名。以下内容适用于您的示例：

Record<'Foo'|'Bar',IDimension>