how to implement interface with variable key and define key at the sametime

Question

I want to create an interface with a defined key, and also a variable key, like so :

interface Data {
  api?: {
    isReady: boolean;
  };
  [key: string]: string;
}

Which leads to an error : Property 'api' of type '{ isReady: boolean; }' is not assignable to string index type 'string'.

I understand that [key:string]: string says "every key of this interface should have a string as its value", which is not the case for api, so the error makes sense.

So, is this possible to create such an interface, with a clearly define key/value pair + a variable key at the same level?

Thanks

andrès coronado · Accepted Answer · 2020-06-12 14:05:49Z

1

you maybe want to to create an object that looks like this:

 interface Data {
  api?: {
    isReady: boolean;
  };
  [key: string]: any;
}

const data: Data = { 'api': { isReady: false }, 'someText': 'text' };
console.log(data);

Although it looks like a good idea doing so, it may not be the case because in this way you loose Type-safety.

answered Jun 12, 2020 at 14:05

andrès coronado

1708 bronze badges

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

Comments

Antot · Accepted Answer · 2020-06-12 14:16:14Z

1

The api property might have its own type:

interface Api {
  isReady: boolean;
};

Then, we can mix the typings for the variable part:

interface Data {
  api?: Api;
  [key: string]: string | Api;
}

answered Jun 12, 2020 at 14:16

Antot

3,9641 gold badge25 silver badges29 bronze badges

3 Comments

KevinTale Over a year ago

It kind of works, altough I'm not really satisfied because the [key: string] value should not have the isReady property. :/

KevinTale Over a year ago

this is more of a conceptual mistake i'm doing right there, I should find an other solution

andrès coronado Over a year ago

are you familiar with typescript utility types? typescriptlang.org/docs/handbook/…

Collectives™ on Stack Overflow

how to implement interface with variable key and define key at the sametime

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related