Skip to content

chainCall

稳定性: 实验性 ⚠️ 实验性功能,风险自负

扩展 defineProps,支持链式调用 withDefaults

FeaturesSupported
Vue 3
Nuxt 3
Vue 2
TypeScript
Volar Plugin

TIP

  • chainCall 不支持 definePropsRefs
  • 你需要从 unplugin-vue-macros/macros 中导入此宏以获取更好的类型检查。

基本用法

vue
<script setup lang="ts">
const props = defineProps<{
  foo?: string
  bar?: number[]
  baz?: boolean
}>().withDefaults({
  foo: '111',
  bar: () => [1, 2, 3],
})
</script>
编译后的代码
vue
<script setup lang="ts">
const 
props
=
withDefaults
(
defineProps
<{
foo
?: string
bar
?: number[]
baz
?: boolean
}>(), {
foo
: '111',
bar
: () => [1, 2, 3],
}, ) </script>

也支持 props 解构 和 JSX:

vue
<script setup lang="ts">
const { foo } = defineProps<{ foo: string }>().withDefaults({
  foo: '111',
})
</script>

TypeScript

为了更好的类型支持,你需要使用特定的语法从 unplugin-vue-macros/macros 中导入此宏。

vue
<script setup lang="ts">
import { 
defineProps
} from 'unplugin-vue-macros/macros' with { type: 'macro' }
defineProps
<{
/* ... */ }>().withDefaults({ /* ... */ }) // ✅ 类型安全 </script>

没有 import 也可以正常使用,但 tsc 会报告一个类型错误:

ts
defineProps
<{
/* ... */ }>().withDefaults({
Property 'withDefaults' does not exist on type 'DefineProps<LooseRequired<{}>, never>'.
/* ... */ })

贡献者

The avatar of contributor named as renovate[bot] renovate[bot]

页面历史