Vue+TS：泛型 & 条件类型在多态组件中的应用揭秘

2023-06-14 04:27:16

TypeScript 多态组件：深入探索泛型和条件类型

在现代前端开发中，组件化架构已成为构建复杂且可维护的应用程序的基石。其中，多态组件 脱颖而出，它们可以根据不同的上下文表现出不同的行为，极大地提高了代码的重用性和灵活性。而在 TypeScript 中，泛型和条件类型正是实现多态组件的利器。

泛型在多态组件中的应用

泛型是一种参数化类型机制，允许我们在定义组件时指定类型参数，并在组件使用时根据实际场景传递不同类型。

示例：多态列表组件

interface ListProps<T> {
  items: T[];
}

export default {
  props: ListProps,
  render() {
    return (
      <ul>
        {this.items.map(item => <li key={item}>{item}</li>)}
      </ul>
    );
  },
};

此组件定义了一个泛型参数 T，表示列表项的数据类型。当使用该组件时，我们可以传递不同的类型参数，例如：

<List items={['a', 'b', 'c']} /> // 字符串数组
<List items={[1, 2, 3]} /> // 数字数组

泛型为我们提供了构建可重用组件的能力，这些组件可以处理不同类型的数据，而无需编写重复的代码。

条件类型在多态组件中的应用

条件类型 是一种高级类型系统特性，允许我们基于条件判断来定义类型。

示例：检查数组类型

type IsArray<T> = T extends Array<unknown> ? true : false;

此条件类型判断类型 T 是否为数组类型，如果是，则返回 true，否则返回 false。

我们可以利用条件类型在多态组件中进行更精细的类型检查。例如，我们可以修改上文中的列表组件，要求 items 属性必须为数组类型：

interface ListProps<T> {
  items: IsArray<T> extends true ? T[] : never;
}

现在，如果我们传递非数组类型的值给 items 属性，编译器会报错。

泛型与条件类型的组合使用

泛型和条件类型可以组合使用，实现更强大的类型检查。例如，我们可以创建多态组件，根据数据源类型调整其行为：

示例：多态列表组件

interface MultiListProps<T> {
  items: T[];
  isNumeric: boolean;
}

export default {
  props: MultiListProps,
  computed: {
    sum() {
      return this.isNumeric ? this.items.reduce((a, b) => a + b, 0) : 0;
    },
  },
  render() {
    return (
      <ul>
        {this.items.map(item => <li key={item}>{item}</li>)}
      </ul>
    );
  },
};