现有React.js项目转TypeScript有简便方法吗？JS和TS能共存吗？

1. React项目能否同时存在JS和TS文件 #

完全可以，TypeScript原生支持混合编译，只要做好基础配置就不会出现报错：

• 在项目根目录的tsconfig.json中开启allowJs: true，允许TS编译器识别处理JS文件
• 若不需要对现有JS文件做类型校验，额外添加checkJs: false，避免存量JS代码抛出大量无意义的类型错误
• 现有开发、打包流程完全不受影响，你可以逐个将JS文件后缀修改为.ts（逻辑文件）/.tsx（React组件文件）逐步迁移，不需要一次性全量替换

2. 低负担迁移方案 #

按照以下步骤操作可以避免一次性出现大量报错，迁移全程不影响原有业务正常运行：

步骤1：安装基础依赖 #

如果是Create React App创建的项目，直接执行：

npm install --save typescript @types/react @types/react-dom @types/node

如果是自行搭建的webpack/vite项目，额外安装对应处理器即可：

• webpack项目：安装ts-loader，在webpack配置中添加.ts/.tsx后缀的解析规则
• vite项目：原生支持TS解析，不需要额外安装loader，直接添加tsconfig.json即可

步骤2：最简tsconfig配置 #

初期不需要配置复杂规则，用以下基础配置就能跑通：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": false,
    "allowJs": true,
    "checkJs": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

初期不要开启strict严格模式，等大部分文件迁移完成后再逐步开启严格规则补全类型，能避免初期出现几百上千条类型报错的问题

步骤3：渐进式迁移 #

• 存量JS文件先不动，新写的业务代码全部用TS编写，先熟悉TS基础语法
• 后续空余时间优先迁移公共组件、通用工具函数，改一个验证一个，不会影响整体业务运行
• 等90%以上的文件都迁移为TS之后，再开启strict规则，逐个补全遗留的类型定义即可

高频报错快速处理 #

• 第三方模块找不到类型定义：直接安装对应@types/xxx依赖包即可，没有官方类型包的话，在src/global.d.ts中加一句declare module 'xxx'临时跳过校验
• 组件props没有类型提示：初期可以先用type Props = any定义，后续再慢慢补全具体字段类型，不需要一开始就写全所有类型定义

内容的提问来源于stack exchange，提问作者FAHIM ARIF RAHMAN 1704040