面试题：Vue Composition API与TypeScript结合时处理复杂业务逻辑的类型推导问题

Question

假设你正在开发一个电商购物车功能，需要在Vue组件中使用Vue Composition API和TypeScript实现添加商品到购物车、计算总价等功能。商品包含id（唯一标识，数字类型）、名称（字符串类型）、价格（数字类型）和数量（数字类型）。请写出关键函数的类型定义和实现代码，并解释在复杂业务逻辑下如何确保类型推导的正确性。

Answer 1

1. 类型定义

// 商品类型定义
interface Product {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

// 购物车类型定义，本质是商品数组
type Cart = Product[];

2. 关键函数实现

<template>
  <div>
    <button @click="addProductToCart(product)">添加商品到购物车</button>
    <p>总价: {{ calculateTotalPrice() }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Product {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

type Cart = Product[];

export default defineComponent({
  setup() {
    const cart = ref<Cart>([]);

    // 添加商品到购物车函数
    const addProductToCart = (product: Product) => {
      const existingProduct = cart.value.find(p => p.id === product.id);
      if (existingProduct) {
        existingProduct.quantity += product.quantity;
      } else {
        cart.value.push(product);
      }
    };

    // 计算总价函数
    const calculateTotalPrice = () => {
      return cart.value.reduce((total, product) => {
        return total + product.price * product.quantity;
      }, 0);
    };

    return {
      cart,
      addProductToCart,
      calculateTotalPrice
    };
  }
});
</script>

3. 确保类型推导正确性的方法

• 明确类型定义：在复杂业务逻辑中，一开始就清晰地定义好各个数据结构的类型，如上述代码中Product和Cart类型的定义，这样在后续使用中可以避免类型混淆。
• 使用类型标注：对于函数的参数和返回值，尽量进行明确的类型标注，例如addProductToCart函数参数标注为Product类型，让编译器能够准确进行类型检查。
• 借助工具：使用TypeScript的类型检查工具，在开发过程中及时发现类型错误，编辑器一般会根据类型定义和标注进行实时提示，有助于快速定位和修正类型问题。
• 测试驱动开发：编写单元测试用例来验证函数的行为和类型的正确性，确保在复杂业务逻辑变化时，类型推导依然符合预期。