defineProps

稳定性: 稳定

使用 $defineProps 可以正确地解构 props 的类型

参见 Vue issue, Reactivity Transform RFC.

特性	支持
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript / Volar Plugin	✅

WARNING

在开始之前，你必须先开启 响应性语法糖

基本用法

<script setup lang="ts">
//       ⬇️ ReactiveVariable<string[]>
const { foo } = $defineProps<{
  foo: string[]
}>()

//     ⬇️ Ref<string[]>
const fooRef = $$(foo)
</script>

Volar 配置

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/define-props",
      // ...更多功能
    ],
  },
}