How to import nested interfaces in typescript

Question

It Typescript when I import nested interfaces the predictatext in VS code shows me items in the high level interface but not in the nested one.

There is a [key:string] in the "Example" interface does this mean I cannot use the predictatext for data structures of this sort (even though it will check type safety), or is it just not working as I have set it up incorrectly.

Example

export interface Item {
    id: number;
    size: number;
}
export interface Example {
    name: string;
    items: {
        [key: string]: Item
    };
}

Then file 2

import {Example, Item} from '../utils/interfaces'

const obj = {
    name: "test",
    items: {
        "a": {
            id: 1,
            size: 10
        },
        "b": {
            id: 2,
            size: 34
        }
    }
}

RESULT

The predictertext works for the first level interface but not after that eg

console.log(obj.            // predictatext offers two options: items & names
console.log(obj.items.      // predictatext offers :    NOTHING

Odilf · Accepted Answer · 2022-05-20 11:06:34Z

1

The problem isn't the nested interfaces. The following won't autocomplete either:

interface Example {
   [key: string]: number
}

It can't autocomplete because the key could be anything. Similarly, anything after obj.items. is valid.

If only certain items are allowed, you would have to specify them in the interface.

answered May 20, 2022 at 11:06

Odilf

2,0961 gold badge10 silver badges13 bronze badges

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

2 Comments

Paul A Over a year ago

Ahh! So All I have to do is persist I just tested it and you are correct. example here eg console.log(obj.items.a.{then I get autocomplete once I fill in a}). Thanks!

Odilf Over a year ago

I actually hadn't realised that was your question, so I'm glad you figured it out! Btw, I just noticed that the object is const. If the object won't change, you can write as const at the end and you will have autocomplete and type safety for that object in particular, but I don't know if that's actually your case.

Collectives™ on Stack Overflow

How to import nested interfaces in typescript

Example

RESULT

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example

RESULT

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related