Objects creation using interface for JSON types in typescript

Question

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"
  // },

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

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

@amadan, isnt it vanilla JS? What do you want me to tag it as? — Sarah
– Sarah, Commented Oct 7, 2020 at 1:12
Things that JavaScript doesn't have: interfaces, type declarations, a type called string (lowercase). I'd guess it's TypeScript (or possibly some related derivative)... but you should know better than me what language you're using. — Amadan
– Amadan, Commented Oct 7, 2020 at 1:15
Because that's how TypeScript works, e.g., typescriptlang.org/docs/handbook/…. My M on its own isn't a valid JavaScript identifier, so it has to be in quotes. — Dave Newton
– Dave Newton, Commented Oct 7, 2020 at 1:45

Timmy Chan · Accepted Answer · 2020-10-12 22:11:34Z

2

Let us disassemble the interface definition.

export interface IStateType  {
    [cityState: 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>

Then instead of <some value type definition>, it is actually:

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

This is the same as

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

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.

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

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.

EDIT 1: Examples

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"

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.

Here is another example:

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"

edited Oct 12, 2020 at 22:11

answered Oct 7, 2020 at 1:56

Timmy Chan

9957 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sarah Over a year ago

This is the best explanation I have gotten. Thank you soo much! I do have a few more questions on this if thats ok. The link for index signature you sent.. I am updating my post.

Heretic Monkey Over a year ago

Please refrain from the update question/update answer cycle @Sarah and Timmy. It's not fair to other people who may come along with other answers for the original question and Stack Overflow is meant for one question => one-to-many answers.

Timmy Chan Over a year ago

@HereticMonkey Actually I have thought about it, but instead of making Sarah create another question/post, the question she asked is related to my answer. She is basically asking me to answer the original question with more details, and adding an example. I think it would be more helpful for everyone that I update the original answer and add more details.

Timmy Chan Over a year ago

@Sarah, you are welcome. Just tag me and I will possibly check the new post out.

Timmy Chan Over a year ago

You have to send a link here and tag me.

|

Collectives™ on Stack Overflow

Objects creation using interface for JSON types in typescript

1 Answer 1

EDIT 1: Examples

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT 1: Examples

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related