新克隆的TypeScript React Native项目大量报错如何排查解决

所有报错为连锁问题，按以下顺序逐一解决即可：

1. 修复基础依赖缺失问题 #

expo/tsconfig.base 找不到是核心诱因，克隆仓库后未安装完整依赖会直接触发该问题：

• 首先在项目根目录执行依赖安装命令：
  • 用npm的话执行 npm install
  • 用yarn的话执行 yarn install
• 如果安装后仍提示找不到expo相关配置，单独补装expo依赖：npm install expo --save-dev
• 检查tsconfig.json内容，你贴的配置末尾混入了编辑器报错提示字符串 - File 'expo/tsconfig.base' not found.enter code here，这部分是无效内容必须删除，否则JSON解析失败会导致所有TS配置失效。
  注意：tsconfig是严格JSON格式，不支持任何注释、额外提示文本，配置末尾的正确结构为：

},
  "extends": "expo/tsconfig.base"
}

2. 修复静态资源导入报ts(2307)问题 #

TS默认无法识别png、jpg等非代码资源的导入类型，需要手动声明全局类型：

• 在项目src目录或者根目录新建后缀为.d.ts的类型声明文件（比如命名为resource.d.ts），写入以下内容：

declare module '*.png' {
  const src: string;
  export default src;
}
declare module '*.jpg' {
  const src: string;
  export default src;
}
declare module '*.jpeg' {
  const src: string;
  export default src;
}
declare module '*.gif' {
  const src: string;
  export default src;
}
declare module '*.svg' {
  const src: string;
  export default src;
}

• 操作完成后重启TS服务即可生效：VS Code下按快捷键Ctrl+Shift+P（macOS为Cmd+Shift+P），搜索选择TypeScript: Restart TS Server。

3. 修复隐式any报ts(7031)问题 #

该报错是因为tsconfig开启了strict: true严格模式，要求所有函数参数必须显式声明类型，两种处理方案：

• 推荐方案：给组件补全类型，两种常用写法：

// 写法1：使用React内置的FC类型，自动包含children类型声明
import { FC } from 'react';
const Title: FC = ({ children }) => {
  return <Text>{children}</Text>;
};

// 写法2：手动声明Props类型
import type { ReactNode } from 'react';
type TitleProps = {
  children: ReactNode;
};
const Title = ({ children }: TitleProps) => {
  return <Text>{children}</Text>;
};

• 临时方案：如果需要快速跑通项目不想逐个改组件类型，可以在tsconfig的compilerOptions中添加"noImplicitAny": false，关闭隐式any校验，但会损失TS类型保护能力，不推荐长期使用。

兜底排查步骤 #

如果上述操作完成后仍有报错，按顺序检查：

• 确认本地Node版本和项目要求版本一致，若项目根目录存在.nvmrc文件，使用nvm切换到对应版本后删除node_modules文件夹重新安装依赖
• 确认项目入口文件、tsconfig.json路径正确，没有被意外修改
• 清理编辑器缓存，重启IDE后再重新校验

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