TypeScript类型推导失败？这些常见坑你可能正踩着

写代码时遇到 TypeScript 报错，但你明明没写类型，它自己“猜”的类型却错了，这就是典型的类型推导失败。很多人以为 TypeScript 能全自动识别一切，结果一运行就报错，变量突然变成 any，或者函数返回值和预期不符。

为什么类型推导会“猜错”

TypeScript 的类型推导依赖上下文信息。如果上下文不明确，它只能靠经验法则猜测。比如数组初始为空，它无法判断将来要存什么类型：

const list = [];
list.push(1);
list.push('hello');
// 此时 list 类型是 (number | string)[]，但你本意可能只想存数字

这种情况下，TypeScript 看到空数组，推导出 never[] 或 any[]，后续操作就容易出问题。

函数返回值推导翻车现场

写一个简单的工具函数：

function formatPrice(price) {
  if (price < 0) return '免费';
  return `$${price.toFixed(2)}`;
}

看起来没问题，但 TypeScript 会把 price 推导为 any，因为没标注参数类型。更糟的是，返回值被推导为 string | undefined，因为你没处理所有分支。调用方一旦做类型判断，就会触发意外行为。

解构赋值时的隐式 any

从接口请求数据后解构赋值很常见：

fetch('/api/user')
  .then(res => res.json())
  .then(data => {
    const { name, age } = data;
    console.log(name.toUpperCase());
  });

这里 data 没有类型标注，TypeScript 推导为 any，name 也是 any。虽然代码能跑，但拼错 namo 不会报错，失去了类型检查的意义。

联合类型太宽泛

多个条件分支返回不同类型时，TypeScript 会合并成联合类型，有时过于宽泛：

function getStatusColor(status) {
  switch (status) {
    case 'active': return 'green';
    case 'inactive': return 'gray';
    default: return null;
  }
}
// 返回值被推导为 string | null

如果你在 JSX 中直接使用，TS 会警告不能把 null 当字符串渲染。这时候需要手动收窄类型，或者给参数加枚举类型。

如何避免推导失败

最直接的办法是主动标注关键位置的类型，别让 TS “瞎猜”：

const list: number[] = [];

function formatPrice(price: number): string {
  if (price < 0) return '免费';
  return `$${price.toFixed(2)}`;
}

interface User {
  name: string;
  age: number;
}
const { name, age } = data as User;

尤其是数组、函数参数、API 响应数据这些动态性强的地方，显式标注比依赖推导更可靠。类型推导是辅助，不是万能钥匙。