Impossible d'utiliser DefineProps avec TypeScript

Question

J'utilise withDefaults 和 defineProps depuis un moment mais il a soudainement commencé à échouer et je ne comprends pas pourquoi !

J'ai un SFC de base comme :

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

Échec de la construction avec erreur :

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

J'ai mis en place une réplication minimale dans StackBlitz : https://stackblitz.com/edit/vitejs-vite-du7xik?file=src%2FApp.vue

Je rencontre soudainement des problèmes de frappe avec mes autres applications professionnelles, mais une à la fois. Toute orientation serait utile !

Éditeur :

Le problème ne se produit que lors de l'exécution d'une version de production (car ce n'est qu'à ce moment-là que vue-tsc ）。在 StackBlitz 上，这意味着在终端中运行 turbo build est appelé. En dehors de cela, au moins lors de l'utilisation d'IntelliJ, je peux voir l'erreur dans l'EDI.

Answer 1

Cette erreur signifie foo qu'une valeur par défaut est fournie telle quelle, alors qu'une fonction d'usine est requise.

devrait être :

foo: () => /./,

C'est une erreur de spécifier directement une valeur par défaut d'accessoire car elle sera partagée entre plusieurs instances de composants et elles peuvent s'influencer mutuellement à travers elle. Cela s'applique spécifiquement aux objets d'expression régulière .

qui peuvent être avec état