为什么打字稿类型保护在这个例子中不起作用？

html5 • • 问答

我的例子是以下代码：

type SomeType = {
    name: string,
    age: number,
} | {
    xy: [number, number]
}


function someFunction(arg: SomeType) {
    if (arg.name && arg.age) {
        // DO STH
    } else if (arg.xy) {
        // DO STH
    }
}

为什么打字稿会向我显示以下错误消息？

悬停时 arg.xy

悬停在arg.name或 上时arg.age：

回答

当您有类型联合时，您只能访问所有类型上存在的属性。因此，例如您无法访问name，因为{ xy: [number, number] }没有name属性。

相反，使用in运算符检查属性是否存在：

if ("name" in arg) {
  // in this block, arg is narrowed to being { name: string, age: number }
} else {
  // in this block, arg is narrowed to being { xy: [number, number ] }
}

游乐场链接

另一种选择是更改您的类型，以便您拥有可区分的联合。即，您有某个属性存在于联合的所有成员上，但每个单独的类型都有不同的值。由于所有类型都有它，您可以随时访问它。因为它是独一无二的，检查它可以告诉你你在处理什么。

type Example = {
  type: 'person',
  name: string,
  age: number,
} | {
  type: 'coordinate',
  xy: [number, number]
}

function someFunction (arg: Example) {
  if (arg.type === 'person') {
    // do something with the person object
  }
}

游乐场链接

以上是为什么打字稿类型保护在这个例子中不起作用？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>