TypeScript多类型变量实现及联合类型属性访问报错解决

当声明Iq类型变量后，直接访问a.variable.first或a.variable.second出现报错，是因为TypeScript的联合类型检查机制：只有当属性在联合类型的所有成员中都存在时，才能直接访问。IType1和IType2没有共有的属性，所以直接访问各自的专属属性会触发类型错误。

以下是几种可行的解决方式：

1. 类型断言（Type Assertion） #

直接指定变量的具体类型，强制TypeScript跳过类型检查：

// 断言为IType1，赋值first属性
(a.variable as IType1).first = 1;

// 断言为IType2，赋值second属性
(a.variable as IType2).second = 2;

这种方式简单直接，适合你明确知道当前variable类型的场景。

2. 类型守卫（Type Guard） #

通过类型判断让TypeScript自动推断变量类型，更安全可靠：

使用in操作符判断属性 #

// 判断是否包含first属性，确认是IType1类型
if ('first' in a.variable) {
  a.variable.first = 1;
} else {
  // TypeScript会自动推断此处为IType2类型
  a.variable.second = 2;
}

自定义类型守卫函数 #

// 自定义函数，判断对象是否为IType1
function isType1(obj: IType1 | IType2): obj is IType1 {
  return 'first' in obj;
}

if (isType1(a.variable)) {
  a.variable.first = 1;
} else {
  a.variable.second = 2;
}

3. 初始化时明确类型 #

如果变量初始化时就能确定具体类型，直接指定初始化值即可：

// 初始化时指定为IType1类型
const a: Iq = { variable: { first: undefined } };
a.variable.first = 1;

// 初始化时指定为IType2类型
const b: Iq = { variable: { second: undefined } };
b.variable.second = 2;

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