Typescript using bracket notation to access optional properties of an object

Question

I have an object, which is of type defined there:

interface IObject extends IIndexable {
  foo?: string;
  foo2?: string;
  foo3?: string;
}

My IIndexable looks like this:

interface IIndexable {
  [key: string]: string;
}

I want to access its properties using brackets notation like this:

let object: IObject = {};
object["foo"] = "bar";

The problem is that key defined in IIndexable can only be of type of string or number and because my objects' keys are all optional, they are of type string | undefined. Error message I get is:

Property 'fullName' of type 'string | undefined' is not assignable to string index type 'string'.

I cannot make my objects' keys not optional, because my object sometimes can be empty. I also tried to make objects' type IObject | {}, but that way I still cannot access its properties.

Is there any way to solve this?

@Aleksey L. I use IIndexable in other places where I need to access objects using brackets notation. It's the same as putting [key: string]: string; line at the end of interface where I need this access. — Mantas Ptakauskas
– Mantas Ptakauskas, Commented Jul 4, 2020 at 13:34
You can access props with brackets notation without defining index signature — Aleksey L.
– Aleksey L., Commented Jul 4, 2020 at 13:37
Without it I get this error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IObject'. No index signature with a parameter of type 'string' was found on type 'IObject'. — Mantas Ptakauskas
– Mantas Ptakauskas, Commented Jul 4, 2020 at 13:39
Yes, that's because you're trying to access it with random string instead of known property — Aleksey L.
– Aleksey L., Commented Jul 4, 2020 at 13:45

Aleksey L. · Accepted Answer · 2020-07-04 13:40:53Z

3

You can define type alias (instead of interface) and use intersection with the IIndexable:

type IObject = IIndexable & {
  foo?: string;
  foo2?: string;
  foo3?: string;
}

Playground

answered Jul 4, 2020 at 13:40

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

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

Collectives™ on Stack Overflow

Typescript using bracket notation to access optional properties of an object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related