TypeScript常见错误汇总

类型推断失败：变量类型不是你想象的那样

写代码时，常会以为TypeScr ipt能自动猜出你的意图。比如从输入框取值，直接做数学运算：

const input = document.getElementById('age');
const age = input.value + 10; // 错误：value 可能是 null

这时候编译报错，是因为getElementById可能返回null。正确做法是加个判断：

if (input) {
  const age = Number(input.value) + 10;
}

接口属性缺失或拼写错误

定义接口后，传对象字面量时容易漏掉必需字段。比如有个用户信息接口：

interface User {
  name: string;
  age: number;
}
function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}
// 调用时少写了 age
greet({ name: 'Alice' }); // 报错

TS会立刻提醒你缺了age。如果临时不想填，可以改成可选属性，或者补上默认值。

函数返回类型未明确

有时候函数逻辑复杂，TypeScript推不出返回类型。比如异步请求处理：

async function fetchUser() {
  const res = await fetch('/api/user');
  return res.json();
}

这个函数返回的是Promise<any>，后续使用容易出问题。建议显式标注返回类型：

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

async function fetchUser(): Promise<UserData> {
  const res = await fetch('/api/user');
  return res.json();
}

联合类型使用不当

定义一个可能为字符串或数字的值很常见：

let value: string | number = 'hello';
value.toUpperCase(); // 在某些情况下会出错

当value是number时，toUpperCase不存在。应该先做类型收窄：

if (typeof value === 'string') {
  value.toUpperCase();
}

忽略undefined和null的情况

从数组找元素，结果没找到返回undefined，直接调用方法就崩了：

const users = [{ name: 'Bob', active: false }];
const activeUser = users.find(u => u.active);
console.log(activeUser.name); // 可能报错

activeUser可能是undefined。安全做法是加个判断：

if (activeUser) {
  console.log(activeUser.name);
}

或者用可选链：

console.log(activeUser?.name);

模块导入路径错误

项目结构一复杂，import路径容易写错。比如文件在同级utils目录：

import { validate } from '../utils/validation';

但实际文件叫validator.ts，就会报找不到模块。这类问题在重构文件夹时高频出现，注意检查后缀和相对路径。

泛型使用不规范

写通用函数时喜欢用any，其实应该用泛型。比如一个返回数组第一项的函数：

function first(arr: any[]) {
  return arr[0];
}

这样丢失了类型信息。改用泛型更安全：

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

调用时原类型能被保留，编辑器也能提示对应属性。