typescript 如何检查具有多种类型的对象的类型

Question

我在 typescript 中有以下代码

Array.map((r: number | PointOptionsObject | [string, number | null] | null ) => {
                    if (r) {
                      ;`
                      ${r.phrase}:
                      <span> hello </span>
                      `
                    }
                  })

我在 typescript 中遇到错误，property phrase doesn't exist on type number 基本上我使用的唯一数据是 PointOptionsObject 类型，它具有 phrase property.. 但我被迫对数组类型中的每个数据项使用这个长声明，因为它是内置库的类型。如果我改变我的代码有

if(typeof r !== "number")

然后我收到一个新错误 Property 'phrase' does not exist on type '[string, number |空]'

这就是我卡住的地方，我不确定如何检查它的类型，我们不能使用内置的 typeof 运算符。如何检查 r 的值是否只是 PointOptionsObject？

Answer 1

您可以通过使用内置数组方法 Array.isArray 为数组添加另一个类型保护来消除所有无效类型:

type PointOptionsObject = {
  phrase: string;
}

type DataTypes = number | PointOptionsObject | [string, number | null] | null;

const result = [].map((r: DataTypes ) => {
  if (r && typeof r !== "number" && !Array.isArray(r)) {
    ;`
    ${r.phrase}:
    <span> hello </span>
    `
  }
})

或者，您可以编写自己的类型保护程序，专门检查 PointOptionsObject。扩展它以涵盖对象实际具有的所有属性:

const isPointOptionsObject = (o: any): o is PointOptionsObject => {
  return o && o.hasOwnProperty("phrase") && typeof o.phrase === "string";
}

像这样使用它:

const result = [].map((r: DataTypes ) => {
  if (isPointOptionsObject(r)) {
    ;`
    ${r.phrase}:
    <span> hello </span>
    `
  }
})