Tidak boleh menggunakan DefineProps dengan TypeScript

Question

Saya telah menggunakan withDefaults 和 defineProps untuk seketika tetapi ia mula gagal dan saya tidak faham mengapa!

Saya mempunyai SFC asas seperti:

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

Pembinaan gagal dengan ralat:

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

Saya menyediakan replikasi minimum dalam StackBlitz: https://stackblitz.com/edit/vitejs-vite-du7xik?file=src%2FApp.vue

Saya tiba-tiba mengalami beberapa isu berkaitan menaip dengan apl kerja saya yang lain, tetapi satu demi satu. Sebarang panduan akan membantu!

Editor:

Masalah hanya berlaku apabila menjalankan binaan pengeluaran (kerana barulah vue-tsc ）。在 StackBlitz 上，这意味着在终端中运行 turbo build dipanggil. Selain daripada itu, sekurang-kurangnya apabila menggunakan IntelliJ, saya dapat melihat ralat dalam IDE.

Answer 1

Ralat ini bermakna foo bahawa nilai lalai disediakan seperti sedia ada, manakala fungsi kilang diperlukan.

sepatutnya:

foo: () => /./,

Adalah satu kesilapan untuk menentukan nilai lalai prop secara langsung kerana ia akan dikongsi antara berbilang contoh komponen dan ia boleh menjejaskan satu sama lain melaluinya. Ini terpakai khusus untuk objek ungkapan biasa 一个>.

yang boleh berbentuk stateful