如何在React Redux的JSX项目中引入并复用TypeScript模块？

嘿，这个需求我之前刚好帮同事搞定过，其实核心就是让项目B同时兼容TypeScript和JavaScript/JSX文件，下面是亲测有效的步骤：

首先得把TypeScript和React、Redux的类型包装进去，打开终端跑命令：

# npm 用户
npm install typescript @types/react @types/react-dom @types/redux --save-dev

# yarn 用户
yarn add typescript @types/react @types/react-dom @types/redux --dev

在项目B的根目录下新建tsconfig.json文件，这是TypeScript的核心配置文件，关键要开启对JS文件的支持，参考配置如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowJs": true, // 允许编译JavaScript文件
    "jsx": "react-jsx", // 适配React 17+的JSX转换，旧版React用"react"
    "strict": false, // 如果不想一开始就严格类型检查，可以先设为false，后续再开启
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx" // 确保所有JS/JSX/TS/TSX文件都被包含
  ],
  "exclude": ["node_modules", "dist"]
}

如果你的项目B是用Create React App创建的，那恭喜你，CRA已经内置了混合TS/JS的支持，安装完依赖后直接就能引入.ts文件，不需要额外改webpack配置。

如果是自定义webpack配置，那需要在webpack.config.js里添加对TS/TSX文件的处理规则，同时保留原有的JSX处理：

module.exports = {
  // ...其他配置
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // 优先解析TS文件
  },
  module: {
    rules: [
      // 处理TS/TSX文件
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      // 保留原有的JS/JSX处理规则
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
      // ...其他loader（比如css、图片等）
    ],
  },
};

现在你就可以在项目B的.jsx文件里直接import项目A的.ts模块了，比如：

// 项目B的某个.jsx文件
import { fetchUser } from '../path/to/projectA/utils/api.ts';
import { userReducer } from '../path/to/projectA/reducers/user.ts';

function UserProfile() {
  // 直接使用这些TS导出的内容就行
  useEffect(() => {
    fetchUser(123).then(res => console.log(res));
  }, []);
  
  return <div>User Profile</div>;
}

如果想让代码更健壮，可以在package.json里添加一个类型检查脚本：

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

跑npm run type-check就能检查所有文件的类型问题，要是想给单个JSX文件开启类型检查，只要在文件顶部加注释：

// @ts-check
import { fetchUser } from '../path/to/projectA/utils/api.ts';

// 这里如果类型不匹配，type-check会报错

最后提醒下：如果项目A的TS模块用到了一些高级语法，记得确保项目B的babel或TypeScript配置能兼容对应的ES版本哦～

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