综合运用TS与React开发电商项目

本课件将介绍如何结合TypeScript与React开发一个简单的电商项目。通过详细的代码案例，帮助学员理解如何在React项目中使用TypeScript，以及如何实现电商平台的一些基本功能。

1. TypeScript与React简介

1.1 TypeScript简介

TypeScript是JavaScript的一个超集，添加了静态类型检查和面向对象编程特性。它可以帮助开发者在编写代码时提前发现错误，并提高代码的可维护性。

1.2 React简介

React是一个用于构建用户界面的JavaScript库，允许开发者通过组件化的方式构建交互式UI。React支持声明式编程，通过状态管理和生命周期控制，使得开发高效且易于维护。

1.3 React与TypeScript结合

React与TypeScript的结合能够提高代码的可靠性和可读性。使用TypeScript可以：

为React组件和props定义类型，提高代码的可读性和安全性。
提供IDE自动补全和类型提示，帮助开发者避免常见错误。

2. 电商项目需求分析

本次电商项目的目标是实现一个简易的电商平台，具备以下基本功能：

商品列表展示。
商品详情查看。
购物车管理。

项目中的各个组件将使用TypeScript进行类型定义，确保组件的数据结构和交互符合预期。

3. 项目结构设计

以下是电商项目的基本目录结构：

src/
├── components/          # 存放React组件
│   ├── ProductList.tsx  # 商品列表组件
│   ├── ProductItem.tsx  # 商品项组件
│   ├── Cart.tsx         # 购物车组件
├── App.tsx              # 主应用组件
├── index.tsx            # 入口文件
└── types/               # 类型定义文件
    ├── product.d.ts     # 商品类型定义
    └── cart.d.ts        # 购物车类型定义

4. 商品类型定义与展示

4.1 定义商品类型

首先，我们为商品创建一个类型定义文件product.d.ts，该文件位于types/目录下：

// types/product.d.ts

export interface Product {
  id: number;           // 商品ID
  name: string;         // 商品名称
  description: string;  // 商品描述
  price: number;        // 商品价格
  imageUrl: string;     // 商品图片URL
}

4.2 商品列表组件

商品列表组件ProductList.tsx负责展示所有商品。我们通过props传递商品数据，并使用TypeScript定义商品数据的类型。

// components/ProductList.tsx
import React from 'react';
import { Product } from '../types/product';
import ProductItem from './ProductItem';

// 定义ProductList组件的Props类型
interface ProductListProps {
  products: Product[];
}

const ProductList: React.FC<ProductListProps> = ({ products }) => {
  return (
    <div>
      <h2>商品列表</h2>
      <div className="product-list">
        {products.map((product) => (
          <ProductItem key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

export default ProductList;

解释：

ProductListProps定义了组件的props类型，确保products是一个Product类型的数组。
使用map方法遍历商品数组，并为每个商品渲染ProductItem组件。

4.3 商品项组件

ProductItem.tsx负责显示每个商品的具体信息。该组件接收一个商品对象并展示商品的图片、名称、价格等。

// components/ProductItem.tsx
import React from 'react';
import { Product } from '../types/product';

// 定义ProductItem组件的Props类型
interface ProductItemProps {
  product: Product;
}

const ProductItem: React.FC<ProductItemProps> = ({ product }) => {
  return (
    <div className="product-item">
      <img src={product.imageUrl} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <p>价格：${product.price}</p>
      <button>加入购物车</button>
    </div>
  );
};

export default ProductItem;

解释：

ProductItemProps定义了product的类型，确保product符合Product接口。
商品的信息（图片、名称、描述、价格）通过props传递并展示。

5. 购物车管理

5.1 定义购物车类型

我们为购物车创建一个类型定义文件cart.d.ts，该文件位于types/目录下：

// types/cart.d.ts

import { Product } from './product';

export interface CartItem {
  product: Product;   // 商品对象
  quantity: number;   // 商品数量
}

export type Cart = CartItem[];

5.2 购物车组件

Cart.tsx组件负责展示购物车中的商品。它将从props中接收购物车的数据，并展示每个商品的数量和总价。

// components/Cart.tsx
import React from 'react';
import { Cart } from '../types/cart';

interface CartProps {
  cart: Cart;
}

const Cart: React.FC<CartProps> = ({ cart }) => {
  const totalPrice = cart.reduce((total, item) => total + item.product.price * item.quantity, 0);

  return (
    <div>
      <h2>购物车</h2>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>
            {item.product.name} x {item.quantity} - ${item.product.price * item.quantity}
          </li>
        ))}
      </ul>
      <p>总价：${totalPrice}</p>
    </div>
  );
};

export default Cart;

解释：

CartProps定义了购物车的props类型，确保cart是一个Cart类型的数组。
使用reduce方法计算购物车的总价。

6. 主应用组件

在App.tsx中，我们组合所有组件，并传递相关的props。

// App.tsx
import React, { useState } from 'react';
import ProductList from './components/ProductList';
import Cart from './components/Cart';
import { Product } from './types/product';
import { Cart as CartType, CartItem } from './types/cart';

const products: Product[] = [
  { id: 1, name: '商品1', description: '这是商品1', price: 100, imageUrl: 'product1.jpg' },
  { id: 2, name: '商品2', description: '这是商品2', price: 200, imageUrl: 'product2.jpg' },
];

const App: React.FC = () => {
  const [cart, setCart] = useState<CartType>([]);

  const handleAddToCart = (product: Product) => {
    const existingItem = cart.find(item => item.product.id === product.id);
    if (existingItem) {
      setCart(
        cart.map(item =>
          item.product.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        )
      );
    } else {
      setCart([...cart, { product, quantity: 1 }]);
    }
  };

  return (
    <div>
      <ProductList products={products} />
      <Cart cart={cart} />
    </div>
  );
};

export default App;

解释：