TypeScript中联合类型array|boolean无法使用数组方法的解决方案咨询

你的问题核心是TypeScript的类型收窄问题：myVehicles是IVehicle[] | boolean联合类型，编译器无法确定它当前是数组还是布尔值，因此直接调用数组方法会报错。以下是几种无需移除boolean类型的解决办法：

1. 使用数组类型守卫（推荐） #

通过Array.isArray()让TypeScript明确当前myVehicles是数组类型，之后就能安全调用push或其他数组方法：

批量赋值或追加列表 #

// 假设从数据库获取的车辆列表
const fetchedVehicles: IVehicle[] = await getVehiclesFromDB();

if (Array.isArray(myVehicles)) {
  // 已存在数组，追加新列表
  myVehicles.push(...fetchedVehicles);
} else {
  // 当前是boolean类型，直接替换为新数组
  myVehicles = fetchedVehicles;
}

逐个添加单辆车 #

const newVehicle: IVehicle = createNewVehicle();

if (Array.isArray(myVehicles)) {
  myVehicles.push(newVehicle);
} else {
  // 初始为boolean时，转为包含该车辆的数组
  myVehicles = [newVehicle];
}

Array.isArray()是TypeScript原生支持的类型守卫，进入if块后，编译器会自动将myVehicles的类型收窄为IVehicle[]，消除报错。

2. 类型断言（仅当你能确定当前类型时使用） #

如果你在代码逻辑中能100%确定myVehicles此时是数组，可以用类型断言强制告诉编译器它的类型：

// 强制断言为数组类型后调用push
(myVehicles as IVehicle[]).push(newVehicle);

// 直接赋值数组给联合类型是允许的，无需断言
myVehicles = fetchedVehicles;

⚠️ 注意：类型断言跳过了TypeScript的类型检查，如果运行时myVehicles实际是布尔值，会抛出Cannot read property 'push' of boolean错误，所以仅在你能确保类型的场景下使用。

3. 初始化时明确状态（可选优化） #

如果myVehicles的初始布尔值是用来标记“未加载”状态，可以在首次加载后固定为数组类型，后续操作无需重复判断：

// 初始状态：false表示未加载
private myVehicles: IVehicle[] | boolean = false;

// 首次加载后转为数组
async function loadVehicles() {
  if (typeof myVehicles === 'boolean') {
    myVehicles = await getVehiclesFromDB();
  }
}

// 后续操作时，只需判断是否已加载为数组
if (Array.isArray(myVehicles)) {
  myVehicles.push(newVehicle);
}

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