chainCall

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

扩展 defineProps，支持链式调用 withDefaults。

Features	Supported
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 会报告一个类型错误：

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

贡献者

Kevin Deng

zhiyuanzmj

Alex

页面历史

最后编辑于大约 1 个月前

查看完整历史

chainCall ​

基本用法 ​

TypeScript ​

贡献者

页面历史

chainCall

基本用法

TypeScript