# react18-webpack5-typescript-demo

**Repository Path**: kayanchan/react18-webpack5-typescript-demo

## Basic Information

- **Project Name**: react18-webpack5-typescript-demo
- **Description**: React+Webpack5项目添加TypeScript支持
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-23
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React18-Webpack5-Typescript-Demo

## 添加TypeScript支持
### 安装依赖

```bash
# TypeScript 核心
yarn add typescript --dev

# TypeScript 类型定义
yarn add @types/react @types/react-dom --dev

# 使用 babel-loader 的方案
yarn add @babel/preset-typescript --dev

# 或者使用 ts-loader 的方案
yarn add ts-loader --dev

# 如果需要 ESLint 支持 TypeScript
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

# 如果需要额外的类型定义
yarn add @types/node --dev
```
### 配置TypeScript

- 创建 `tsconfig.json` 文件 `npx tsc --init`

- 修改
```json
    "module": "esnext",
    "allowJs": true,
    "checkJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
```
### 配置webpack
```javascript
const path = require('path');

module.exports = {
  // ... 其他配置
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript', // 添加 TypeScript preset
              ],
            },
          },
        ],
      },
      // 或者使用 ts-loader
      // {
      //   test: /\.(ts|tsx)$/,
      //   use: 'ts-loader',
      //   exclude: /node_modules/,
      // },
    ],
  },
};
```
### 创建类型定义文件

- `src/types/react-app-env.d.ts`

- `src/types/index.d.ts`
### 调整入口文件