如何在 Typescript 中访问 JSON object？

Question

I have that JSON 'media' object that looks like this:

const media = [{
    "0": {
        "small": "",
        "large": ""
    }
}];

I have to type it this way:

export interface Media {
    0: {
        large: string
        medium: string
        small: string,
        type: string
    }
}

in order to be able to access it, via element[0].small .

All the JSON objects I am working with are like the following, with an index equals to 0 , which is not very useful but I can't change it.

Is there any way I can access my properties just by doing element.small ?

Answer 1

You can transform your JSON objects and use them in the simplified form:

const clean = (elem) => elem[0];

---

You can also gain typescript's type support when doing this, eg you can define with a generic:

export interface Raw<T> {
    0: T
}
const transform = <T>(raw: Raw<T>): T => raw[0];

That way you can type your JSON input via Raw<The_Interface_I_Want> ;

You can then define interfaces just for the relevant information:

export interface Media {
    large: string
    medium: string
    small: string,
    type: string
}

And then you can use it like so:

const rawMedia: Raw<Media> = {
    0: {
        "large": "large",
        "small": "small",
        "medium": "medium",
        "type": "type"
    }
};

const media: Media = transform<Media>(rawMedia);

Benefit of doing it this way is that you always have type inference and gain autoccompletion this way. In theory, you could also customize the transformation the way you need it.