如何在不修改现有代码的情况下为已有Create React App项目引入TypeScript

1. 精准配置tsconfig.json #

这是解决问题的核心，要明确告诉TypeScript只处理TS/TSX文件，同时允许JS文件导入它们，但不对JS代码做任何类型检查。以下是关键配置示例：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx", // 根据你的JSX运行时调整，旧版React用"react"
    "strict": true, // 强制开启TS/TSX的严格类型检查
    "allowJs": true, // 允许TS解析JS文件的导入逻辑（否则JS导入TSX会报错）
    "checkJs": false, // 彻底关闭JS文件的类型检查
    "noEmit": true, // 仅做类型检查不生成编译文件，若需编译可设为false并配置outDir
    "skipLibCheck": true, // 跳过第三方库类型检查提升速度
    "moduleResolution": "node"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"], // 仅纳入需要检查的TS/TSX文件
  "exclude": ["node_modules", "src/**/*.js", "src/**/*.jsx"] // 排除所有JS文件
}

• allowJs是必须的：否则JS文件导入TSX时会被TS视为无效模块，报错找不到文件。
• strict确保TSX文件的类型检查生效，比如组件props、返回值的类型校验都会启用。

2. 单独运行类型检查命令 #

在package.json中添加专门的类型检查脚本，避免和构建流程混淆：

{
  "scripts": {
    "type-check": "tsc --noEmit"
  }
}

执行npm run type-check时，TS只会扫描include配置里的TS/TSX文件，严格检查它们的类型，完全忽略JS代码。

3. 适配构建工具（如Webpack/Vite） #

• Vite：默认支持TSX，无需额外配置，只要确保tsconfig如上设置即可，构建时会自动编译TSX，且不会检查JS文件类型。
• Webpack：需要配置ts-loader或babel-loader处理TSX文件，在loader配置中指定只处理.tsx后缀，同时关闭类型检查（交给单独的type-check脚本）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
          options: {
            transpileOnly: true // 只编译不做类型检查，加快构建速度
          }
        }
      ]
    }
  };
  

4. 可选：给JS导入TSX加基础类型提示 #

如果希望JS文件中导入TSX时有基本的类型提示，无需修改JS文件后缀，只需在TSX文件中显式导出类型：

// Button.tsx
import React from 'react';

export interface ButtonProps {
  text: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>;
};

export default Button;

JS文件导入时，虽然不会做类型检查，但编辑器会根据TSX的类型声明给出补全提示。

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