使用 TS + React 初始化电商项目环境

在现代前端开发中，结合 TypeScript 和 React 可以有效提高开发效率和代码质量，特别是在构建复杂的应用时，类型安全和组件化的特性尤为重要。本文将介绍如何使用 TypeScript 和 React 初始化一个电商项目环境，并提供具体的步骤和代码案例。

1. 环境准备

1.1 安装 Node.js

在开始之前，需要确保已安装 Node.js。Node.js 提供了运行 JavaScript 的环境，同时也包含了 npm（Node 包管理器），用来管理项目依赖。

• 安装 Node.js：Node.js官网
• 安装完成后，可以使用以下命令验证安装是否成功：

node -v
npm -v

1.2 创建 React 项目

使用 create-react-app 工具可以快速初始化一个 React 项目，并配置好 TypeScript 环境。

npx create-react-app my-ecommerce-app --template typescript

这条命令会创建一个包含 TypeScript 配置的 React 项目，并自动安装相关依赖。

1.3 安装额外依赖

根据电商项目的需求，可能需要安装一些额外的库，比如路由、状态管理、UI 库等。

npm install react-router-dom @reduxjs/toolkit react-redux
npm install styled-components @types/styled-components

• react-router-dom：用于页面路由管理。
• @reduxjs/toolkit 和 react-redux：用于全局状态管理。
• styled-components：用于组件化样式的管理。

2. 项目结构

初始化项目后，项目结构大致如下：

my-ecommerce-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── store/
│   ├── App.tsx
│   ├── index.tsx
│   └── index.css
├── package.json
├── tsconfig.json
└── .gitignore

• src/assets/：存放图片、图标等资源。
• src/components/：存放项目中的公共组件。
• src/pages/：存放页面组件。
• src/store/：存放 Redux 状态管理相关代码。

3. TypeScript 配置

3.1 tsconfig.json

tsconfig.json 是 TypeScript 配置文件，用于定义项目的编译选项和类型检查选项。对于 React 项目，通常需要以下配置：

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["dom", "es2015"],
    "allowJs": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

• jsx: "react-jsx"：告诉 TypeScript 使用新的 JSX 转换方式（适用于 React 17 及以上版本）。
• strict: true：启用严格类型检查。

4. React 组件开发与 TypeScript

在 React 中使用 TypeScript，最大的好处是可以为组件的 props 和 state 提供类型定义，减少错误并提高代码的可维护性。

4.1 创建一个商品展示组件

首先，创建一个商品展示组件 ProductCard，该组件接收商品信息作为 props。

// src/components/ProductCard.tsx
import React from "react";

// 定义组件的 props 类型
interface ProductProps {
  id: number;
  name: string;
  price: number;
  image: string;
}

// 商品展示组件
const ProductCard: React.FC<ProductProps> = ({ id, name, price, image }) => {
  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>{`$${price.toFixed(2)}`}</p>
      <button>Add to Cart</button>
    </div>
  );
};

export default ProductCard;

• ProductProps 是该组件的 props 类型定义，包含商品的 id、name、price 和 image。
• 使用 React.FC<ProductProps> 来指定组件类型，确保 TypeScript 正确推断出 props 的类型。

4.2 在页面中使用 ProductCard 组件

// src/pages/HomePage.tsx
import React from "react";
import ProductCard from "../components/ProductCard";

// 商品数据示例
const products = [
  { id: 1, name: "Product 1", price: 29.99, image: "image1.jpg" },
  { id: 2, name: "Product 2", price: 49.99, image: "image2.jpg" },
  { id: 3, name: "Product 3", price: 19.99, image: "image3.jpg" }
];

const HomePage: React.FC = () => {
  return (
    <div className="home-page">
      <h1>Product List</h1>
      <div className="product-list">
        {products.map((product) => (
          <ProductCard
            key={product.id}
            id={product.id}
            name={product.name}
            price={product.price}
            image={product.image}
          />
        ))}
      </div>
    </div>
  );
};

export default HomePage;

• 在 HomePage 页面中，使用 ProductCard 组件来展示商品列表。
• products.map() 方法用于遍历商品数据，并将每个商品的 props 传递给 ProductCard 组件。

5. 状态管理（Redux + TypeScript）

在电商项目中，通常需要全局状态管理来处理购物车、用户信息等。使用 Redux 与 TypeScript，可以确保状态管理更具可维护性。

5.1 设置 Redux Store

// src/store/index.ts
import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";

// 配置 Redux store
export const store = configureStore({
  reducer: {
    cart: cartReducer
  }
});

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

• cartReducer 是处理购物车状态的 reducer。

5.2 创建购物车 Slice

// src/store/cartSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

// 定义购物车状态类型
interface CartState {
  items: { id: number; quantity: number }[];
}

const initialState: CartState = {
  items: []
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItemToCart(state, action: PayloadAction<{ id: number }>) {
      const item = state.items.find((item) => item.id === action.payload.id);
      if (item) {
        item.quantity += 1;
      } else {
        state.items.push({ id: action.payload.id, quantity: 1 });
      }
    }
  }
});

export const { addItemToCart } = cartSlice.actions;
export default cartSlice.reducer;

• CartState 定义了购物车的状态类型。
• addItemToCart 是添加商品到购物车的操作，PayloadAction 用于指定动作的有效载荷类型。

5.3 在组件中使用 Redux 状态

// src/components/AddToCartButton.tsx
import React from "react";
import { useDispatch } from "react-redux";
import { addItemToCart } from "../store/cartSlice";

interface AddToCartButtonProps {
  productId: number;
}

const AddToCartButton: React.FC<AddToCartButtonProps> = ({ productId }) => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(addItemToCart({ id: productId }));
  };

  return <button onClick={handleClick}>Add to Cart</button>;
};

export default AddToCartButton;

• AddToCartButton 组件通过 useDispatch 钩子分发 addItemToCart 动作，将商品添加到购物车。

6. 总结

通过使用 TypeScript 和 React，我们成功初始化了一个电商项目环境，并创建了商品展示组件、购物车状态管理等核心功能。利用 TypeScript 可以提高代码的类型安全，确保开发过程中的错误尽早被发现，同时借助 Redux 管理全局状态，提升应用的可扩展性和维护性。