vue.js - Ce tip TypeScript este utilizat pentru a transmite o clasă în definițiile de proprietăți ale scriptului setup din Vue 3?

Am un component Vue 3 cu fișier unic folosind abordarea script setup. Unul dintre props pe care vreau să-l definesc va accepta echivalentul atributului class. Aceasta înseamnă că valoarea prop-ului ar putea fi un șir, o expresie, un array sau un obiect. Problema apare atunci când încerc să folosesc withDefaults() pentru a atribui o valoare implicită goală acestui prop.

withDefaults(
  defineProps<{
    itemClass?: unknown
  }>(),
  {
    itemClass: '',
  }
)

Care este legat ca

<div :class="itemClass">...</div>

Încerc să evit utilizarea tipului any. Am încercat unknown, dar primesc o eroare când încerc să îi dau o valoare implicită. Soluția temporară pare să fie pur și simplu să elimin valoarea implicită, dar pot exista cazuri în care vreau să setez o valoare implicită.

Există un tip specific pentru atributul class din Vue?

Răspuns #1

Valoarea legăturii class poate fi unul dintre următoarele tipuri:

```
string
```
Exemplu:
```
<div :class="myStringProp">
```
Record<string, boolean> (Sintaxă obiect)
Exemplu:
```
<div :class="{ active: true, error: true }">
```

sau un șir mixt dintre cele de mai sus:

(string | Record<string, boolean>)[] (Sintaxă de tablouri)
Exemplu:
```
<div :class="['item', { active: true, error: true }]">
```

Deci tipul itemClass ar trebui să fie reuniunea acestor tipuri:

defineProps<{
  itemClass?: string | Record<string, boolean> | (string | Record<string, boolean>)[]
}>()

demo

Răspunsul #2

Cu Vue 3.2.39 folosesc asta:

  import { HTMLAttributes } from "vue";

  const props = defineProps<{
    class?: HTMLAttributes["class"];
  }>();

Oricum, este încă any. Sper că Vue va avea curând tipuri corespunzătoare.