时间戳

首页 > 解决方案 > 使用 typescript 中 JSON 类型的接口创建对象

javascript - 使用 typescript 中 JSON 类型的接口创建对象

问题描述

我很难理解给定 JSON 的对象类型是如何形成的。例如，我有这个 JSON 对象，我需要为其形成一个类型。

// "Spokane, WA": {
  //   "My M": "M-Spokane-WA.json",
  //   "MY D": "D-Spokane-WA.json"
  // },
  // "Pondera, MT": {
  //   "My M": "M-Pondera-MT.json",
  //   "MY D": "D-Pondera-MT.json"
  // },

我遵循的规则是在创建对象时复制 JSON，然后为变量命名。最后我有这样的事情。

export interface IStateType {
cityState: string {   // "Spokane, WA" is in quotes so seems like is coming in string.
My M :string  // "My M" is string .. How to show the  "M-Spokane-WA.json" part???
MY D: string  
}
}

原来这是正确的说法

export interface IStateType  {
     [cityState: string]: {
        ["My M"]: string;
        ["MY D"]: string;
      };
}

有人可以解释一下为什么我们使用 [] 表示 cityState 以及为什么在 My M 和 My D 周围有引号，但在 cityState 周围没有引号？

--------------- 更新 2 来自索引签名上的链接

interface StringArray {
  [index: number]: string;  // It says string is a return type..
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];  // Is this the return mentioned above :string?

let myStr: string = myArray[0];  // Is myArray[0] this the [index:number] part of interfaces StringArray?

标签： javascriptjsontypescript

解决方案

让我们反汇编接口定义。

export interface IStateType  {
    [cityState: string]: <some value type definition>,
}

我们在这里定义了一个索引签名。索引签名使接口能够具有与确切类型匹配的无限数量的属性。键必须是string类型，值必须是<some value type definition>

然后<some value type definition>，它实际上是：

{
    ["My M"]: string;
    ["MY D"]: string;
};

这与

{
    "My M": string;
    "MY D": string;
};

您必须使用引号My M，My D因为字符串中有空格。如果没有空格，您可以直接使用MyMand MyD，不带引号。

您不能使用["cityState"]instead of [cityState: string]，因为这是您定义索引签名的方式。

您必须使用[cityState: string]而不是的原因cityState: string是因为这可以让您传递任意数量的城市状态的 JSON 对象并且可以正常工作。您的原始接口定义仅接受一个城市州。

编辑 1：示例

我在您的代码中看到了一些明显的错误，所以这里是更正的版本。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = {0: "Fred"};

let myStr: string = myArray[0]; // "Fred"

中的每个属性都myArray需要有一个numberaskey和stringas value。这是在代码中定义的[index: number]: string。其余的是不言自明的imo。

这是另一个例子：

let myArray2: StringArray;
myArray2 = {
  4: "hello",
  7: "world",
  3643728: "enjoy",
  1: "good",
  5.2: "luck",  // 5.2 is a number
};

console.log(myArray2[5.2]); // Logs "luck"

推荐阅读