How to provide structural information on dynamically generated JSON

I would like to publish an NPM package (written in Typescript) that looks like this:

const networks = { main: 1, test: 2, dev: 3 }

const resource = {
  foo: {
    [networks.main]: "hello",
    [networks.test]: "there",
    [networks.dev]: "friend"
  },
  bar: {
    [networks.main]: "how",
    [networks.test]: "are",
    [networks.dev]: "you"
  },
  baz: {
    [networks.main]: "have a",
    [networks.test]: "good",
    [networks.dev]: "day"
  }
}

And I want to make sure the user can set the network once and not have to worry about what network they are on:

const myMainResource = getResourceFor(networks.main)
const myTestResource = getResourceFor(networks.test)
const myDevResource = getResourceFor(networks.dev)

console.log(myMainResource.foo) // "hello"
console.log(myTestResource.foo) // "there"
console.log(myDevResource.foo) // "friend"

This way, instead of having to write resource.foo[networks.main] they can just write resource.foo and get the same thing.

The real object is actually a lot more nested, for example: alice.contracts.foo, bob.protocol.bar, etc. But the way the data is stored, the network is always at the leaf node of the tree.

I've already written the getResourceFor function and it works as expected by recursing through all the resources and replacing the networks (which is why the data is "generated" at run-time).

But I also want to have auto-complete work in the editor (using VS Code). And since the object is created dynamically at run-time, the editor can't really know the shape of the resulting JSON object.

What is the best way to approach this?

If you want to see the real code, it's here: https://github.com/studydefi/money-legos