如何使用index文件统一导出React TypeScript项目的.tsx模块

结论先行 #

你完全可以沿用原有的集中导出结构，TypeScript原生支持这种模块收拢逻辑，报错是由缺失TS相关编译配置、写法细节疏漏导致的。

问题排查与修复步骤 #

1. 补全依赖与webpack配置 #

你当前的webpack仅配置了scss的loader，没有对.ts/.tsx文件的编译支持，且scss的loader链也不完整，修改如下：

首先安装必要依赖：

npm install typescript ts-loader @types/react @types/react-dom style-loader css-loader --save-dev

修改后的webpack.config.js：

module.exports = {
  resolve: {
    // 配置可省略的导入后缀，优先级从高到低
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss']
  },
  module: {
    rules: [
      {
        // 匹配ts、tsx文件交给ts-loader处理
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      },
      {
        test: /\.scss$/,
        // sass-loader需要和css-loader、style-loader配合才能正常注入样式
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

2. 新增/调整tsconfig.json配置 #

项目根目录新增tsconfig.json，核心配置示例：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "jsx": "react-jsx", // React 17及以上版本用该值，更低版本用"react"
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

3. 调整模块导出导入写法 #

• 将原来的index.js重命名为index.ts（仅放导出语句不需要用.tsx后缀）
• 导出写法示例（因为已经配置了extensions，不需要写完整后缀）：

// 组件为命名导出时的写法
export { Credits } from './Credits';
export { SocialMedia } from './SocialMedia';

// 如果组件是默认导出，要做一层转换，不然会找不到导出项
// export { default as Credits } from './Credits';

• 导入侧写法（注意要写相对路径）：

// 假设index.ts放在src/components目录下，当前文件在src/pages目录
import * as CommonComponents from '../components';
// 直接使用：<CommonComponents.Credits />

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