在Angular中使用联合类型作为函数参数时出现编译错误

嘿，这个问题我之前也碰到过！核心原因是TypeScript的联合类型在类型不确定的时候，只允许访问所有类型共有的属性。你的fooBar是Foo|Bar类型，编译器没法确定它到底是Foo还是Bar，而isFoo是Foo独有的属性，所以直接访问就会报错啦。

给你几个靠谱的解决办法：

1. 用instanceof做类型守卫（最推荐） #

因为你这里是类的实例，用instanceof可以直接让编译器明确变量类型：

isFooBar(fooBar: Foo|Bar){ 
  if(fooBar instanceof Foo){ 
    // 到这里TypeScript已经确定fooBar是Foo实例，放心用isFoo
    console.log("is foo"); 
  } else {
    // 这里自动推断是Bar类型，能安全访问isBar
    console.log("is bar");
  }
}

2. 自定义类型守卫（适合非类实例场景） #

如果你的类型不是类，而是普通对象字面量，可以写个自定义守卫函数来判断类型：

// 自定义类型守卫，告诉编译器返回true时obj是Foo类型
function isFoo(obj: Foo|Bar): obj is Foo {
  return (obj as Foo).isFoo !== undefined;
}

isFooBar(fooBar: Foo|Bar){ 
  if(isFoo(fooBar)){ 
    console.log("is foo"); 
  }
}

3. 类型断言（迫不得已再用） #

如果你百分百确定当前fooBar就是Foo类型，可以用类型断言跳过检查，但这种方式会丢失TypeScript的类型保护，不推荐随便用：

isFooBar(fooBar: Foo|Bar){ 
  if((fooBar as Foo).isFoo){ 
    console.log("is foo"); 
  }
}

另外你提到的Moment示例，那是函数重载的写法，和联合类型的属性访问规则不一样——函数重载是提前告诉编译器不同参数对应不同的返回值/行为，和联合类型变量的属性访问逻辑是两回事哦。

内容的提问来源于stack exchange，提问作者John