Vue3通透教程TS为组件的props标注类型

在Vue3中，使用TypeScript时，我们可以为组件的props定义具体的类型，以确保传入的数据类型是我们所期望的。这样可以在开发过程中减少一些潜在的错误，并提高代码的可维护性。

下面是一个简单的例子，演示如何为Vue组件的props定义类型：

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  props: {
    message: String // 定义prop的类型为String
  }
});
</script>

如果你想要更详细地定义类型，可以使用TypeScript的类型系统。例如，如果你想要message既可以是string类型，也可以是一个包含title和content属性的对象：

<template>
  <div>{{ message.title }} - {{ message.content }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
type Message = {
  title: string;
  content: string;
};
 
export default defineComponent({
  props: {
    message: [String, Object as () => Message] // 定义prop的类型为String或者Message对象
  }
});
</script>

在这个例子中，我们定义了一个Message类型，它包含title和content两个属性。然后，我们通过Object as () => Message定义了一个返回Message类型的工厂函数，以此来表示message prop既可以是字符串，也可以是Message类型的对象。