如何使用联合类型修复打字稿“类型上不存在属性”？

Question

我正在尝试访问可能是也可能不是对象的变量的属性。如果变量是一个对象，我想读取它的“值”属性，否则只读取变量。

我想做这样的事情：

interface MyType {
    myvar: string | MyObject
}
interface MyObject {
    value: string
}

function MyComponent({myvar}: MyType){
    return(
        <div>
            {myvar.value? myvar.value : myvar}
        </div>
    )
}

但我收到错误“在 MyObject 类型上未找到属性‘值’” myvar.value。

我尝试检查变量是否是一个对象{typeof myvar === "object" ? myvar.value : myvar} ，但没有成功。

我发现这个打字稿问题https://github.com/Microsoft/TypeScript/issues/28138 他们建议使用 if("value" in myvar)或if(myvar.value !== undefined)。

不幸的是它没有起作用。

编辑：是否有一个不需要转换为“任何”的解决方案？

Answer 1

我找到了一个比强制转换稍微好一点的解决方案。转换为包含 value 属性的类型。

interface MyType {
    myvar: string | MyObject
}
interface MyObject {
    value: string
}

function MyComponent({myvar}: MyType){
    return(
        <div>
            {(myvar as MyObject).value? (myvar as MyObject).value : myvar}
        </div>
    )
}

如此处所述https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and- Differentiating-types