TS2307 模块找不到?检查路径和声明
写项目时遇到 Cannot find module './utils' 这类报错,别急着删代码。TypeScript 对模块解析比较严格,尤其在使用相对路径或别名时容易出问题。如果路径没错,先确认是否配置了 baseUrl 或 paths。比如你在 tsconfig.json 里用了 @/components,就得加上对应的路径映射:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
}
}改完别忘了重启编辑器,有时候缓存会让错误持续显示。
类型不匹配:string 不能赋值给 number
这种错误太常见了,尤其是从接口拿数据的时候。后端返回的字段看着像数字,实际是字符串,直接塞给 number 类型变量就炸了。与其改类型,不如在数据处理层做转换:
const age = Number(res.data.age); // 强转一下,安全落地也可以用联合类型提前预防:type User = { age: string | number },灵活应对脏数据。
Property 'xxx' does not exist on type 'HTMLElement'
操作 DOM 时最容易踩这个坑。比如你写了 document.getElementById('input').value,TypeScript 提示没有 value 属性,因为 HTMLElement 不一定有 value。这时候得明确告诉编译器元素类型:
const input = document.getElementById('input') as HTMLInputElement;
console.log(input.value); // 现在没问题了或者用更安全的写法:if (input instanceof HTMLInputElement) 做运行时判断。
泛型函数类型推导失败
写工具函数时经常用泛型,但有时候 TS 推不出来类型,干脆报错。比如:
function first<T>(arr: T[]): T {
return arr[0];
}
const result = first([1, 2, 3]); // 大概率能推对
const wrong = first(someUnknownArray); // 推不出来就麻烦这时候手动指定泛型类型更靠谱:first<string>(list),相当于打个标签,让编译器少猜点。
node_modules 类型冲突
装了个新包,突然一堆红色波浪线,说某个类型重复定义。这通常是多个版本的 @types 包共存导致的。比如项目里同时存在 @types/react 和 @types/react-dom 的版本不匹配。解决方案是统一升级:
npm install --save-dev @types/react@latest @types/react-dom@latest再不行就删掉 node_modules 和 lock 文件重新装。虽然暴力,但有效。
无法编译 JSX:尝试把文件改成 .tsx
明明写了 React 组件,却提示 Cannot use JSX unless the '--jsx' flag is provided。除了检查 tsconfig 是否开启 jsx,还要看文件扩展名是不是 .tsx。TypeScript 规定:只有 .tsx 文件才能写 JSX,.ts 里写会直接报错。改个后缀就行,别硬扛。
忽略某一行的类型检查
有些场景实在绕不过去,比如调用第三方库的非标准方法,可以临时关闭检查:
// @ts-ignore
someObject.nonExistentMethod();但记得加注释说明原因,别留坑给后来人。长期方案还是补上类型定义或者换更规范的库。