面试题：TypeScript联合类型在大型前端项目复杂业务逻辑模块整合中的实践

假设你正在参与一个大型电商前端项目，项目中有多个业务模块，如商品展示模块、购物车模块、订单模块等。不同模块之间存在数据交互，例如商品展示模块返回的商品数据可能有不同的类型（普通商品、促销商品、限时抢购商品等），购物车模块需要接收并处理这些不同类型的商品数据。请使用TypeScript联合类型和类型别名等高级特性，设计一套类型系统，确保各个模块之间数据交互的准确性和可维护性，并且要实现一个函数，能够根据商品类型执行不同的业务逻辑，如计算商品总价（普通商品按原价计算，促销商品按折扣价计算等）。

19.1万热度

难度

前端开发TypeScript

定义类型别名和联合类型：

首先定义商品类型的基础接口，然后通过联合类型表示不同类型的商品。

// 定义商品基础接口
type BaseProduct = {
    id: number;
    name: string;
    price: number;
};
// 促销商品接口
type PromotionProduct = BaseProduct & {
    discount: number;
};
// 限时抢购商品接口
type FlashSaleProduct = BaseProduct & {
    saleEndTime: Date;
};
// 联合类型表示不同类型的商品
type Product = BaseProduct | PromotionProduct | FlashSaleProduct;

实现根据商品类型计算总价的函数：

function calculateTotalPrice(products: Product[]): number {
    let total = 0;
    products.forEach(product => {
        if ('discount' in product) {
            total += product.price * (1 - product.discount);
        } else if ('saleEndTime' in product) {
            total += product.price;
        } else {
            total += product.price;
        }
    });
    return total;
}

使用示例：

const products: Product[] = [
    { id: 1, name: '普通商品', price: 100 },
    { id: 2, name: '促销商品', price: 200, discount: 0.2 },
    { id: 3, name: '限时抢购商品', price: 150, saleEndTime: new Date() }
];
const totalPrice = calculateTotalPrice(products);
console.log(`商品总价: ${totalPrice}`);

这样通过TypeScript的类型别名和联合类型，定义了一套类型系统来确保模块间数据交互的准确性。并且calculateTotalPrice函数能够根据商品的不同类型执行相应的业务逻辑计算总价，提高了代码的可维护性。

星途面试题库

面试题：TypeScript联合类型在大型前端项目复杂业务逻辑模块整合中的实践

知识考点

面试题答案