Javascript Optional chaining doesnt work with template literals

Question

I am trying to apply template literal with optional chaining.

type Item = {
itemId:number,
price: number};

type ItemType = {
A:Item,
B:Item
};

const data : ItemType = {
  A:{itemId:1, price:2},
  B:{itemId:2, price:3}
};

let Itemid = `data?.${variable}?.itemId`

where variable is a string with A or B as value. I am not sure if optional chaining and template literals are supported together. Any Leads is appreciated.

Edited: I am receiving "string cant be used to index type Item' when tried with data?.[variable]?.itemId . I have updated with type now.

Edited: Removing type of variable helped in solving above error message.

Answer 1

Just wrap the variable inside [ and ] like: data?.[variable]?.itemId (it's called Computed Property Names and it's an es6 feature.)

Full code:

let data = {
  A:{itemId:1, price:2},
  B:{itemId:2, price:3}
}

let variable = 'A'
let Itemid = data?.[variable]?.itemId

More: Output of string literal is an string, so you can use eval(`data?.${variable}?.itemId`) to evaluate the value of it. (Note that using eval is a bad practice.)

However In your case, There is no need to use template literals. Just use [] as described above.

Answer 2

In a template the only stuff that is treated as an expression is stuff within ${} , so in your case your optional chain indicators are part of the string , not part of the expression that will be interpolated into the string.

The syntax for optional chaining using objects keys is data?.['string']?.itemId , or if the key is stored inside a variable data?.[variable]?.itemId .