How to use optional chaining operator with variable in typescript

Question

I have following code and I would like to pass number from value key of variable object, How can I use variable for optional chaining operator for it to solve the error Element implicitly has an any type?

    function fun(i?: number) {
        console.log(i)
    }

    const variable = { min: { value: 1, name: 'google' }, max: {value: 2, name: 'apple'} }
    const variable2 = { min: { value: 1, name: 'google' } }
    const variable3 = { max: {value: 2, name: 'apple'} }

    fun(variable?.min.value) // working => 1
    fun(variable?.max.value) // working => 2
    fun(variable2?.min.value) // working => 1
    fun(variable2?.max.value) // working => undefined
    fun(variable3?.min.value) // working => undefined
    fun(variable3?.max.value) // working => 2

    Object.keys(variable).forEach((key) => {
        fun(variable?.[key]?.value) // working but with error Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ min: { value: number; name: string; }; max: { value: number; name: string; }; }'.
    })

.[key] looks like invalid syntax. Given that you are getting the key by looping over the variable, the variable has to exist. variable[key] should always be valid in the forEach — Taplar
– Taplar, Commented Jul 31, 2020 at 23:19
@Taplar it's not .[key] it's ?.[key], it's a new composite operator. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — zerkms
– zerkms, Commented Jul 31, 2020 at 23:20
@Taplar it's a ?.[] operator, optional chaining + indexing. — zerkms
– zerkms, Commented Jul 31, 2020 at 23:21

Xetera · Accepted Answer · 2020-07-31 23:25:34Z

5

This isn't actually an optional chaining problem, but a problem with how Object.keys works. Typescript assumes that an object may have more keys than is known at compile time so the type of key here is string and not keyof variable. To get around that you would have to let the TS compiler know that all the keys are known at compile time using

Object.keys(variable).forEach((key) => {
  fun(variable[key as keyof typeof variable].value) 
})

You're already treating variable as a non-null variable when you use it in Object.keys so there's no need to additionally use optional chaining on it. Additionally, when you cast key into keyof typeof variable, you're asserting that it already exists so you can remove the optional chaining before ?.value as well.

answered Jul 31, 2020 at 23:25

Xetera

1,5071 gold badge12 silver badges17 bronze badges

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

1 Comment

Max Waterman Over a year ago

OK, so how would you do something like variable && Object.keys(variable).length>1? If it were a method on the object, it would be variable?.keys().length > 1 but it isn't...

Collectives™ on Stack Overflow

How to use optional chaining operator with variable in typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related