TypeScript常见错误汇总

类型推断不匹配

刚接触 TypeScript 的人常遇到的问题是变量赋值时报错。比如定义了一个字符串变量，后面却试图给它赋数字：

let userName = "Alice";
userName = 123; // 报错：不能将类型 'number' 分配给 'string'

这种情况在实际开发中很常见，比如从表单获取的值默认是字符串，但不小心参与了数学运算，就会触发类型错误。

对象属性访问报错

访问一个可能不存在的属性时，TypeScript 会提示错误。例如：

const user = { name: "Bob" };
console.log(user.age.toFixed(2)); // 对象上可能没有 age 属性

这时候应该先判断属性是否存在，或者使用可选链操作符 ?. 来安全访问：

console.log(user.age?.toFixed(2)); // 不再报错，undefined 时返回 undefined

函数参数未指定类型

写函数时如果没写参数类型，虽然能运行，但在严格模式下会警告：

function add(a, b) {
  return a + b;
}

最好明确标注类型，避免后续调用出错：

function add(a: number, b: number): number {
  return a + b;
}

数组方法使用不当

比如对一个可能是 null 或 undefined 的数组调用 map 方法：

let list: string[] | null = null;
list.map(item => item.toUpperCase()); // 运行时报错：Cannot read property 'map' of null

应该先做非空判断：

if (list) {
  list.map(item => item.toUpperCase());
}

接口定义与实际数据不符

从后端拿到的数据结构和接口定义不一致，容易导致编译错误或运行异常。例如定义了必须字段，但接口返回为空：

interface User {
  id: number;
  name: string;
}

const response = await fetch('/api/user');
const userData: User = await response.json(); // 实际数据可能缺少字段

可以将字段设为可选，或在运行时做校验处理。

忘记导入类型

使用第三方库时，想引用其提供的类型但没正确导入：

import { Response } from 'express';

function handle(req: Request, res: Response) { }
// 报错：找不到 Request 类型

需要确认是否漏掉了 import，或者是否应从同一模块导入。

联合类型处理不完整

当变量是联合类型时，直接调用只有部分类型才有的方法会报错：

function printId(id: string | number) {
  console.log(id.toUpperCase()); // number 没有 toUpperCase 方法
}

可以用类型缩小的方式处理：

function printId(id: string | number) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}