Typescript+React项目模板从零开始，初学者搭建指南

2024-01-23 18:22:37

Typescript+React项目模板搭建

Typescript+React项目模板搭建是前端开发中常见的任务，本文将介绍如何从零开始搭建Typescript+React项目模板，帮助您快速上手Typescript+React项目开发。

项目初始化

首先，我们需要创建一个新的项目目录，并初始化项目。

mkdir my-typescript-react-project
cd my-typescript-react-project
npm init -y

安装Typescript

接下来，我们需要安装Typescript。

npm install --save-dev typescript

配置tsconfig

接下来，我们需要配置tsconfig.json文件。该文件将告诉Typescript如何编译我们的代码。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

安装React

接下来，我们需要安装React和相关的库。

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

项目结构

我们的项目结构如下：

my-typescript-react-project
├── node_modules
├── src
│   ├── App.tsx
│   ├── index.tsx
├── package.json
├── tsconfig.json
└── webpack.config.js

开发工具

我们使用webpack作为开发工具。

npm install --save-dev webpack webpack-cli webpack-dev-server

配置webpack

我们还需要配置webpack.config.js文件。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};