DefineProps kann nicht mit TypeScript verwendet werden

Question

Ich benutze withDefaults 和 defineProps schon eine Weile, aber plötzlich funktionierte es nicht mehr und ich verstehe nicht, warum!

Ich habe einen einfachen SFC wie:

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

Build fehlgeschlagen mit Fehler:

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

Ich habe eine minimale Replikation in StackBlitz eingerichtet: https://stackblitz.com/edit/vitejs-vite-du7xik?file=src%2FApp.vue

Ich habe plötzlich einige Probleme mit dem Tippen mit meinen anderen Arbeits-Apps, aber eine nach der anderen. Jede Anleitung wäre hilfreich!

Herausgeber:

Das Problem tritt nur auf, wenn ein Produktions-Build ausgeführt wird (da nur dann vue-tsc ）。在 StackBlitz 上，这意味着在终端中运行 turbo build aufgerufen wird). Ansonsten kann ich den Fehler zumindest bei Verwendung von IntelliJ in der IDE sehen.

Answer 1

该错误意味着 foo 按原样提供了默认值，而需要工厂函数。

应该是：

foo: () => /./,

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