Vue3 Setup Script PropType TS 定义代码演示

在Vue3中，使用TypeScript定义组件的props可以通过PropType来实现。下面是一个Vue3的组件代码示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

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

export default defineComponent({
  props: {
    title: {
      type: String as PropType<string>,
      required: true,
    },
    description: {
      type: String as PropType<string>,
      default: '',
    },
  },
});
</script>

在这个例子中，我们使用defineComponent函数创建了一个Vue3组件，并通过props字段定义了两个属性 title和description。在props字段中，我们使用PropType来指定属性的类型，并使用TypeScript的类型断言语法as PropType<string>来声明属性的具体类型。

对于title属性，我们设置了required属性为true，表示这个属性是必需的，而description属性设置了default属性为''，表示如果没有传入description属性时，默认值为空字符串。

这样，我们就定义了一个含有两个属性的Vue3组件，并使用TypeScript进行了类型定义。