何为 Vue3 组件标注 TS 类型，看这篇文章就够了！

在Vue3中，我们可以使用TypeScript来为组件的props定义类型。这样做可以确保props的类型正确，并且在开发过程中得到编译时的检查。

以下是一个简单的例子，演示如何为Vue3组件标注TS类型：

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return {
      ...props
    };
  }
});
</script>

在这个例子中，我们定义了一个名为message的prop，它的类型被标注为String，并且是必须的。这样，当其他开发者使用这个组件时，如果他们提供的message不是一个字符串，TypeScript将会在编译时报错。

如果你想为props定义更复杂的类型，你可以使用TypeScript的接口或者类型别名。例如：

<template>
  <div>{{ user.name }} - {{ user.age }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
interface User {
  name: string;
  age: number;
}
 
export default defineComponent({
  props: {
    user: {
      type: Object as () => User,
      required: true
    }
  },
  setup(props) {
    return {
      ...props
    };
  }
});
</script>

在这个例子中，我们定义了一个User接口，并且通过Object as () => User定义了user prop的类型，表示它应该是一个符合User接口的对象。这样，任何不符合User接口的user prop将在编译时报错。