面试题：TypeScript交叉类型与接口混合在复杂业务逻辑中的应用

Question

在一个电商系统的前端开发中，有用户信息模块、购物车模块和订单模块。用户信息有基本信息接口`UserBasicInfo`，购物车有购物车操作接口`CartActions`，订单有订单提交接口`OrderSubmit`。请设计一个使用TypeScript交叉类型与接口混合的方案，来满足这样的业务场景：当用户登录后，可进行购物车操作并提交订单，且提交订单时要携带用户基本信息。要求写出完整的接口定义、交叉类型定义以及相关函数或方法的示例代码，并解释这种设计的优势。

Answer 1

接口定义

// 用户基本信息接口
interface UserBasicInfo {
    username: string;
    email: string;
}

// 购物车操作接口
interface CartActions {
    addToCart(product: string): void;
    removeFromCart(product: string): void;
    getCartItems(): string[];
}

// 订单提交接口
interface OrderSubmit {
    submitOrder(userInfo: UserBasicInfo, cartItems: string[]): void;
}

交叉类型定义

// 登录用户的功能集合，通过交叉类型实现
type LoggedInUser = UserBasicInfo & CartActions & OrderSubmit;

示例代码

// 创建一个模拟登录用户的实例
const loggedInUser: LoggedInUser = {
    username: 'testUser',
    email: '[e-mail]',
    addToCart(product) {
        console.log(`Added ${product} to cart`);
    },
    removeFromCart(product) {
        console.log(`Removed ${product} from cart`);
    },
    getCartItems() {
        return [];
    },
    submitOrder(userInfo, cartItems) {
        console.log(`Submitting order with user: ${userInfo.username}, items: ${cartItems.join(', ')}`);
    }
};

// 模拟购物车操作
loggedInUser.addToCart('Product 1');
const cartItems = loggedInUser.getCartItems();

// 提交订单
loggedInUser.submitOrder(loggedInUser, cartItems);

设计优势

1. 代码结构清晰：通过接口定义，将不同功能模块的行为和数据结构进行明确的划分，每个接口专注于一个特定的功能领域。交叉类型则将这些接口组合起来，清晰地定义了登录用户所具备的完整功能集合。
2. 类型安全：TypeScript的静态类型检查机制确保了代码在编译阶段就能发现类型不匹配的错误。例如，如果在submitOrder方法中传入的userInfo不符合UserBasicInfo接口的定义，TypeScript会给出明确的错误提示，大大提高了代码的稳定性和可维护性。
3. 可扩展性：当电商系统需要添加新的功能时，比如用户的地址管理功能，只需要定义一个新的接口，然后通过交叉类型添加到LoggedInUser中即可，不会影响到其他已有的功能模块。这样的设计使得代码易于扩展和维护。