使用CRA搭建基于 TypeScript 的 React项目

一、使用 CRA 创建项目

npx create-react-app create_react_ts --template typescript

出现Success时说明创建成功：

二、项目配置

1、配置ESLint和Prettier

（1）安装ESLint和Prettier相关依赖

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/parser @typescript-eslint/eslint-plugin --legacy-peer-deps

（2）配置ESLint

在根目录创建 .eslintrc.js：

module.exports = {
   
  env: {
   
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
   
    ecmaFeatures: {
   
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "prettier"],
  rules: {
   
    "prettier/prettier": [
      "error",
      {
   
        trailingComma: "es5", // 统一与 Prettier 配置保持一致
      },
    ],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/comma-dangle": "off",
    "@typescript-eslint/no-unused-expressions": [
      "error",
      {
   
        allowShortCircuit: true,
        allowTernary: true,
      },
    ],
    quotes: ["error", "double"], // 确保 ESLint 和 Prettier 都使用双引号
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["warn"], // 代替 `no-unused-vars`
  },
};

（3）配置Prettier

在根目录创建 .prettierrc：

{
   
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

2、配置 Router

（1）安装Router相关依赖

npm install react-router-dom

（2）配置Router

在src目录下新建文件router/index.tsx，并在其中定义路由：

import {
    createBrowserRouter } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";

const routes = [
  {
   
    path: "/",
    element: <Home />,
  },
  {
   
    path: "/about",
    element: <About />,
  },
];

export default createBrowserRouter(routes);

在 src/pages/Home/index.tsx：

import React from "react";

const Home = () => {
   
  return <div>Home Page</div>;
};

export default Home;

在 src/pages/About/index.tsx：

import React from "react";

const About = () => {
   
  return <div>About Page</div>;
};

export default About;

在 src/App.tsx中引入路由配置：

import {
    RouterProvider } from "react-router-dom";
import router from "./router"; // 引入刚才创建的 router

function App() {
   
  return <RouterProvider router={
   router} />;
}

export default App;

3、配置Redux

（1）安装 Redux Toolkit 及 React-Redux

npm install @reduxjs/toolkit react-redux --save

（2）创建 Store

在 src目录下创建store/index.ts文件：

import {
    configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slices/counterSlice";

export const store = configureStore({
   
  reducer: {
   
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

（3）创建Slice

在 src/store/slices/counterSlice.ts中：

import {
    createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
   
  name: "counter",
  initialState: {
    value: 0 },
  reducers: {
   
    increment: (state) => {
   
      state.value += 1;
    },
    decrement: (state) => {
   
      state.value -= 1;
    },
  },
});

export const {
    increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

（4）在 index.tsx 中提供 Store

在 src/index.tsx：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import {
    Provider } from "react-redux";
import {
    store } from "./store";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement,
);
root.render(
  <Provider store={
   store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

（5）在组件中使用 Redux

在 src/pages/Home.tsx中：

import {
    useDispatch, useSelector } from "react-redux";
import {
    RootState } from "../../store";
import {
    increment, decrement } from "../../store/slices/counterSlice";

const Home = () => {
   
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Home Page</h1>
      <p>Count: {
   count}</p>
      <button onClick={
   () => dispatch(increment())}>+</button>
      <button onClick={
   () => dispatch(decrement())}>-</button>
    </div>
  );
};

export default Home;

4、 配置 Axios

（1）安装axios相关依赖

npm install axios

（2）配置Axios

import axios from "axios";

const request = axios.create({
   
  baseURL: "https://api.example.com",
  timeout: 10000,
});

// 请求拦截器
request.interceptors.request.use(
  (config) => {
   
    // 在这里添加 token 或其他通用设置
    config.headers.Authorization = `Bearer token`;
    return config;
  },
  (error) => Promise.reject(error),
);

// 响应拦截器
request.interceptors.response.use(
  (response) => response.data,
  (error) => {
   
    console.error("Request Error:", error);
    return Promise.reject(error);
  },