使用TypeScript中的JSON类型的接口创建对象 [英] Objects creation using interface for JSON types in typescript

问题描述

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

I am having a hard time understanding how the object types are formed given a JSON. For example I have this JSON object which I need to form a type for.

// "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，然后为变量指定名称.最后我有这样的东西.

The rule I am following is copy the JSON while creating the object and then give the names to the variables. In the end I have something like this.

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  
}
}

原来这是正确的放置方式

turned out this is the correct way to put it

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

有人可以解释为什么我们对CityState使用[]，为什么在我的M和我的D周围有引号，但在cityState周围没有引号吗?

Can someone please explain why are we using [] for cityState and why are there quotes around My M and My D but not around cityState?

----------------- Udpate 2 从索引签名上的链接

--------------- Udpate 2 From the link on index signature

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? 

推荐答案

让我们反汇编接口定义.

Let us disassemble the interface definition.

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

我们在此处定义了索引签名.索引签名使接口能够具有无数个与确切类型匹配的属性.密钥必须为string类型，并且值必须为<some value type definition>

We have a index signature defined here. An index signature makes the interface able to have infinite number of properties matching the exact type. The key has to be of string type, and the value has to be of <some value type definition>

然后代替<some value type definition>，实际上是:

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

这与

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

由于字符串中有空格，因此必须在My M和My D周围使用引号.如果没有空格，则可以直接使用MyM和MyD而不带引号.

You have to use quotation marks around My M and My D because there are white spaces in the string. If there are no spaces, you could have used MyM and MyD directly, without quotation marks.

不能使用["cityState"]代替[cityState: string]，因为这是定义索引签名的方式.

You cannot use ["cityState"] instead of [cityState: string], because this is how you define an index signature.

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

The reason why you have to use [cityState: string] instead of cityState: string is because this lets you pass a JSON object of an arbitrary number of city states and just works. Your original interface definition accepts only one city state.

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

I see some obvious mistakes in your code, so here is the corrected version.

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

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

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

myArray中的每个属性都需要一个number作为key，并且一个string作为value.这在代码[index: number]: string中定义.其余的是不言自明的imo.

Each property in myArray needs to have a number as key, and string as value. This is defined in the code [index: number]: string. The rest is self-explanatory 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"

这篇关于使用TypeScript中的JSON类型的接口创建对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！