为 props 标注类型

 当使用

<script setup lang="ts">const props = defineProps({foo: { type: String, required: true },bar: Number})props.foo // stringprops.bar // number | undefined</script>

这被称为 运行时声明 ，因为传递给 defineProps() 的参数会作为运行时的 props 选项使用。

第二种方式，通过泛型参数来定义 props 的类型，这种方式更加直接：

<script setup lang="ts">const props = defineProps<{foo: stringbar?: number}>()</script>

这被称为 基于类型的声明 ，编译器会尽可能地尝试根据类型参数推导出等价的运行时选项。

我们也可以将 props 的类型移入一个单独的接口中：

<script setup lang="ts">interface Props {foo: stringbar?: number}const props = defineProps<Props>()</script>

基于类型的方式更加简洁，但失去了定义 props 默认值的能力。我们可以通过目前实验性的 响应性语法糖 来解决：

<script setup lang="ts">interface Props {foo: stringbar?: number}// 响应性语法糖 默认值会被编译为等价的运行时选项const { foo, bar = 100 } = defineProps()

这个行为目前需要在配置中显式地选择开启：

// vite.config.jsexport default {plugins: [vue({reactivityTransform: true})]}// vue.config.jsmodule.exports = {chainWebpack: (config) => {config.module.rule('vue').use('vue-loader').tap((options) => {return {...options,reactivityTransform: true}})}}

如果没有使用

import { defineComponent } from 'vue'export default defineComponent({props: {message: String},setup(props) {props.message // <-- 类型：string}