無法將 DefineProps 與 TypeScript 一起使用

Question

我已經使用 withDefaults 和 defineProps 一段時間了，但突然開始失敗，我不明白為什麼！

我有一個基本的 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/App.vue

我突然遇到了一些與打字相關的問題，我的其他工作應用程序，但一次一個。任何指導都會有所幫助！

編輯：

該問題僅在執行生產建置時發生（因為只有在那時才會呼叫 vue-tsc ）。在 StackBlitz 上，這表示在終端機中執行 turbo build 。除此之外，至少在使用 IntelliJ 時，我還能夠在 IDE 中看到錯誤。

Answer 1

該錯誤表示 foo 按原樣提供了預設值，而需要工廠函數。

應該是：

foo: () => /./,

直接指定 prop 預設值是錯誤的，因為它將在多個元件實例之間共享，它們可能透過它相互影響。這特別適用於可以有狀態的正規表示式物件.

#