Question

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

我想做这样的事情：

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

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

但是我在myvar.value上收到错误消息“在MyObject类型上找不到属性'值'。

我尝试检查变量是否为对象{typeof myvar === "object" ? myvar.value : myvar} ，没有运气。

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

不幸的是，它没有用。

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

Answer 1

您可以尝试以下方法：

const getValueType = (myvar: any) => {
   if (myvar typeof === "object") {
      return myvar.value
   } else {
     return myvar
   }
}

or this: 

const getValueType = (myvar: any) => {
   (myvar typeof === "object") ? myvar.value : myvar
}

render(){
  const value = getValueType(myvar)
  <div>
      {value}
  </div>
}

Answer 2

您可以通过以下代码检查type

{typeof(myvar) === "string" ? myvar : myvar.value}

OR

您必须明确地强制转换为any。

请检查下面的代码行

{(myvar as any).value? (myvar as any).value : myvar}

您的代码应如下所示

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

render(){
<div>
    {(myvar as any).value? (myvar as any).value : myvar}
</div>
}

希望这对您有用！

Answer 3

我找到了比强制转换更好的解决方案。强制转换为包含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

所述

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

3 个答案: