Using TypeScript Index Signatures, can I specify another interface?

Question

I have an interface Config that will contain objects that I have not declared yet. I want these objects to each be an interface called Environment

Like so: Types.ts

interface Environment {
    root: string,
    dependencies: Object,
    devDependencies: Object
}

export interface Config {
    current: string,
    [index: string]: Environment,
}

// Object will look like this. However, when 
// I first initialize this the properties base and test will not exist yet.
const config: Config = {
   current: 'base',
   base: {
    root: 'path/to/root',
    dependencies: {},
    devDependencies: {}
   },
   test: {
    root: 'path/to/root',
    dependencies: {},
    devDependencies: {}
   },
   // can add additional Environments later on
}

I am getting an error when I run this called Property 'current' of type 'string' is not assignable to string index type 'Environment'. I am unsure why this error shows up.

Ryan Le · Accepted Answer · 2021-08-24 05:38:02Z

1

Your current: string is interfere with [index:string] Environment

Change to this would help:

export interface Config {
    [index: string]: Environment | string,
}

Playground

Or to specify all your possible keys:

interface Environment {
  root: string,
  dependencies: Object,
  devDependencies: Object
}

type Config = {
  [key in 'current' | 'base' | 'test']: Environment | string
};

const config: Config = {
  current: 'base',
  base: {
    root: 'path/to/root',
    dependencies: {},
    devDependencies: {},
  },
  test: {
    root: 'path/to/root',
    dependencies: {},
    devDependencies: {},
  },
};

config.current

By doing so, you will get no error referring to these types.

edited Aug 24, 2021 at 5:38

answered Aug 24, 2021 at 5:15

Ryan Le

8,5181 gold badge18 silver badges27 bronze badges

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

2 Comments

pythonNovice Over a year ago

Thank you for your response! I think this could have worked potentially, but I do need access to both the current property and keeping the Environment interface. If I use [index: string]: Environment | string I end up getting an error in my file. I instead decided to use current: any and this seems to be working enough for me. I will mark this as the answer since it did answer my question roughly.

Ryan Le Over a year ago

Hey, I updated my answer, you can specify your types.

Collectives™ on Stack Overflow

Using TypeScript Index Signatures, can I specify another interface?

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