How to use json with typescript interfaces?

Question

I am reading JSON data in my typescript app. I found this tool JSON2TS that creates interfaces from JSON, so that typescript knows what the json must contain.

My json:

{
"questions": [
    {
    "text": "Is this a question?",
    "answers": ["yes", "no", "maybe", "maybe not"],
    "correct":1
    }]
}

The generated interfaces:

declare module namespace {

export interface Question {
    text: string;
    answers: string[];
    correct: number;
}

export interface RootObject {
    questions: Question[];
}

}

These interfaces need to be saved in a d.ts file and referenced in the code. My question: how do I actually use the json data after loading it with ajax?

I'm not sure about what you ask for. If you have an object that you get from some ajax-service, you have access to all its properties and methods as usual. All these interfaces are doing is to give you the ability to type it properly. — Alex
– Alex, Commented Jun 13, 2016 at 16:23
Yes, but typescript won't allow that if you don't declare the type. Of course, you can always use "any" as the type, but then you don't have the IDE advantages (code completion and error checking) — Kokodoko
– Kokodoko, Commented Jun 13, 2016 at 20:12
Aha, so your question was how to type your json-object, not how to use the json data. — Alex
– Alex, Commented Jun 13, 2016 at 20:15
Choosing the right wording when you don't know what the exact problem is can sometimes be tricky... — Kokodoko
– Kokodoko, Commented Jun 13, 2016 at 20:16

NYCdotNet · Accepted Answer · 2016-06-13 18:43:10Z

1

With that definition file, if your code is in the namespace namespace, you could do it like this:

var questions = <RootObject>functionThatReturnsYourJSONData().questions;

If your code is not in the namespace namespace, this should work.

var questions = <namespace.RootObject>functionThatReturnsYourJSONData().questions;

In either case, this would be strongly typed:

if (questions.length > 0) {
    console.log(questions[0].text);
}

answered Jun 13, 2016 at 18:43

NYCdotNet

4,6771 gold badge27 silver badges31 bronze badges

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

2 Comments

Kokodoko Over a year ago

Thanks, it works! Also, is the "RootObject" really necessary ?

NYCdotNet Over a year ago

If the function that returns your data is already typed as a RootObject, then no. I think RootObject is an artifact of the JSON typer you were using.

Collectives™ on Stack Overflow

How to use json with typescript interfaces?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related