vue3 relative ts 联合属性

在Vue3中使用TypeScript开发时，可以使用联合类型（Union Types）来定义具有多个属性类型的变量。联合类型指的是在变量定义时可以指定多个类型中的任意一个类型，用 | 符号分隔。

下面是一个示例：

interface ButtonProps {
  text: string;
  icon?: string;
}

interface LinkProps {
  href: string;
  text: string;
}

type ButtonLinkProps = ButtonProps | LinkProps;

export default defineComponent({
  props: {
    buttonLink: {
      type: Object as PropType<ButtonLinkProps>,
      required: true
    }
  }
})

在上面的代码中，我们定义了一个ButtonProps接口和一个LinkProps接口，分别表示按钮和链接的属性。然后我们使用联合类型定义了一个ButtonLinkProps类型，它可以是ButtonProps或LinkProps类型的任意一个。

最后，我们将ButtonLinkProps类型作为props的类型，这样在使用时可以传递一个对象，它必须包含ButtonProps或LinkProps中的属性。

使用时可以这样写：

<template>
  <div>
    <button v-if="isButton" :text="buttonLink.text" :icon="buttonLink.icon"></button>
    <a v-else :href="buttonLink.href">{{ buttonLink.text }}</a>
  </div>
</template>

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

interface ButtonProps {
  text: string;
  icon?: string;
}

interface LinkProps {
  href: string;
  text: string;
}

type ButtonLinkProps = ButtonProps | LinkProps;

export default defineComponent({
  props: {
    buttonLink: {
      type: Object as PropType<ButtonLinkProps>,
      required: true
    }
  },
  computed: {
    isButton(): boolean {
      return 'icon' in this.buttonLink;
    }
  }
})
</script>

在上面的示例代码中，我们使用了computed属性来判断传递进来的对象是ButtonProps还是LinkProps类型的，从而根据不同类型的属性渲染按钮或链接。