javascript - 如何在 typescript 中使用带有变量的可选链接运算符

Question

我有以下代码，我想从变量对象的值键中传递数字，如何将变量用于可选链接运算符以解决错误元素隐式具有 any类型？

    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; }; }'.
    })

Answer 1

这实际上不是可选链接问题，而是 Object.keys 的问题。作品。 Typescript assumes that an object may have more keys than is known at compile time所以 key 的类型这里是 string而不是 keyof variable .为了解决这个问题，您必须让 TS 编译器知道所有键在编译时都是已知的，使用

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

你已经在治疗 variable在 Object.keys 中使用时作为非空变量所以不需要额外使用可选链。此外，当您施放 key进入 keyof typeof variable ，您断言它已经存在，因此您可以删除 ?.value 之前的可选链接以及。