解决TypeScript中“Interface | {}”类型访问属性报错的最佳方案

这种情况我之前也碰到过，每次写(car as Car).name确实挺烦的，给你几个不用类型断言的实用解决方案：

1. 用类型缩小明确对象类型 #

TypeScript的类型推断可以通过条件判断自动缩小类型范围，你可以直接检查关键属性是否存在，或者写一个可复用的自定义类型守卫：

方案1a：直接检查属性存在性 #

interface Car {
  uuid: string;
  name: string;
  // 其他属性...
}

const car: Car | {} = {};

// 检查Car的核心必填属性是否存在
if ('uuid' in car && 'name' in car) {
  // 这里TypeScript会自动推断car为Car类型，放心访问name
  console.log(car.name);
}

方案1b：自定义类型守卫函数 #

如果需要在多个地方判断类型，写一个可复用的守卫函数更高效：

interface Car {
  uuid: string;
  name: string;
}

function isCar(obj: unknown): obj is Car {
  // 先排除null和非对象类型，再验证属性类型
  return typeof obj === 'object' && obj !== null 
    && 'uuid' in obj && typeof (obj as Car).uuid === 'string'
    && 'name' in obj && typeof (obj as Car).name === 'string';
}

const car: Car | {} = {};

if (isCar(car)) {
  console.log(car.name); // 类型已自动缩小为Car，无报错
}

2. 调整类型定义，避免不合理的联合类型 #

你当前用Car | {}作为类型，其实{}在TypeScript里表示任何非原始类型的值（比如数组、函数都符合{}类型），这可能不是你真正想表达的意思。建议根据实际场景调整：

场景2a：car可能未初始化（无值） #

如果car只是可能还没被赋值为Car实例，换成Car | undefined或Car | null更合理，然后用可选链+空值合并处理：

const car: Car | undefined = undefined;

// 可选链自动处理undefined情况，空值合并提供默认值
console.log(car?.name ?? '未命名车辆');

场景2b：car确实是“空的Car对象” #

如果必须表示一个没有任何属性的空对象，定义一个更精确的空类型：

// 表示没有任何属性的对象
type EmptyCar = Record<string, never>;
const car: Car | EmptyCar = {};

if ('name' in car) {
  console.log(car.name); // 类型自动缩小为Car
}

3. 可选链+非空断言（谨慎使用） #

如果你能100%确定当前代码路径里car一定是Car类型（比如之前已经做过判断，但TypeScript没推断到），可以用可选链快速访问，或者用非空断言跳过检查：

// 可选链：如果car是空对象，返回undefined
console.log(car?.name);

// 非空断言：仅当你确定car是Car时使用，否则会有运行时风险
console.log(car!.name);

为什么原来的代码会报错？ #

因为{}类型在TypeScript中表示“不包含任何已知属性的对象”，TypeScript无法确认car是否包含name属性，所以会阻止直接访问，避免潜在的运行时错误。

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