无法将 DefineProps 与 TypeScript 一起使用

Question

我已经使用withDefaultsanddefineProps一段时间了，但突然开始失败，我不明白为什么！

我有一个基本的 SFC，例如：

<script
  setup
  lang = "ts">
  const props = withDefaults(defineProps<{
    foo : RegExp
  }>(), {
    foo: /./
  })
</script>
<template>
  <!-- rest of the stuff -->
</template>

构建失败并出现以下错误：

error TS2322: Type 'RegExp' is not assignable to type '(props: Readonly<{ foo?: RegExp | undefined; }>) => RegExp'.
  Type 'RegExp' provides no match for the signature '(props: Readonly<{ foo?: RegExp | undefined; }>): RegExp'.

14     foo: /./,
       ~~~

  src/App.vue:11:5
    11     foo?: RegExp;
           ~~~
    The expected type comes from property 'foo' which is declared here on type 'InferDefaults<Readonly<{ foo?: RegExp | undefined; }>>'


Found 1 error in src/App.vue:14

我在 StackBlitz 中设置了最小复制：https://stackblitz.com/edit/vitejs-vite-du7xik? file=src%2FApp.vue

我突然遇到了一些与打字相关的问题，而我的其他工作应用程序却一次出现一个。任何指导都会有所帮助！

编辑：

该问题仅在运行生产构建时发生（vue-tsc仅在此时调用）。在 StackBlitz 上，这意味着turbo build在终端中运行。除此之外，至少在使用 IntelliJ 时，我还能够在 IDE 中看到错误。

Answer 1

该错误意味着foo默认值是按原样提供的，而工厂函数是预期的。

它应该是：

foo: () => /./,

直接指定 prop 默认值是错误的，因为它将在多个组件实例之间共享，它们可能通过它相互影响。这特别适用于有状态的正则表达式对象。