Funktioniert defineProps({ items: Array }) mit einem generischen Typparameter?

Nein. Die Laufzeit-Variante von defineProps mit einem props-Optionsobjekt liefert dem Compiler keine Typinformationen, generische Ableitung funktioniert ausschließlich mit der Typangabe defineProps ().

Woher weiß die Komponente, welchen konkreten Typ T beim Einbinden hat?

TypeScript beziehungsweise Volar leiten T automatisch aus den tatsächlich übergebenen Props ab, ähnlich wie bei einer generischen Funktion. Ein Array vom Typ User[] führt dazu, dass T innerhalb der Komponente als User erkannt wird.

Kann eine generische Komponente auch typisierte Scoped Slots haben?

Ja, über defineSlots () lassen sich Scoped Slots mit demselben generischen Typparameter wie Props und Emits typisieren, sodass alle drei konsistent auf denselben konkreten Typ verweisen.

Unterstützt das generic-Attribut Standardwerte für Typparameter?

Nein, im Gegensatz zu normalen TypeScript-Generics mit werden Standardwerte im generic-Attribut derzeit nicht unterstützt. Der konkrete Typ muss beim Einbinden immer ableitbar sein.

Wie schränkt man den generischen Typ auf bestimmte Properties ein?

Mit einem extends-Constraint, zum Beispiel , wenn die Komponente intern auf eine id-Property angewiesen ist, etwa für die key-Bindung in v-for.

Was passiert, wenn TypeScript den generischen Typ nicht eindeutig ableiten kann?

TypeScript fällt auf einen breiteren, weniger präzisen Typ zurück. In der Praxis zeigt sich das meist durch fehlende Autovervollständigung im Editor, ohne dass sofort ein harter Fehler entsteht.

Sind komplexe Mapped Types im generic-Attribut möglich?

Nur eingeschränkt. Der Vue-Compiler unterstützt ein pragmatisches Subset von TypeScript-Generics, weshalb sich komplexe Mapped oder Conditional Types besser in eine separate, reine TypeScript-Funktion oder ein Composable auslagern lassen.

Ist das generic-Attribut auch mit der Options API nutzbar?

Nicht direkt auf demselben Weg. script setup generics sind an die script setup-Syntax gebunden, die Options API benötigt für generische Komponenten weiterhin einen anderen, umständlicheren Ansatz über defineComponent.

Vue script setup mit Generics: typisierte, wiederverwendbare Komponenten bauen

{ }

Vue.js · TypeScript · Generics · script setup

script setup Generics
typisierte, wiederverwendbare Komponenten bauen

Eine Liste-Komponente, die Zeilen rendert, egal ob es sich um Benutzer, Produkte oder Bestellungen handelt, ist ein klassischer Fall für TypeScript-Generics, doch in einer Vue-Komponente fehlte lange die passende Syntax dafür. Seit Vue 3.3 unterstützt script setup ein eigenes generic-Attribut, mit dem sich Props, Emits und Slots typsicher an einen generischen Typparameter binden lassen, ohne auf any oder unknown auszuweichen. Das Ergebnis sind Komponenten, die sich wie generische Funktionen verhalten: einmal geschrieben, aber für beliebige, konkrete Item-Typen mit voller Autovervollständigung nutzbar.

15 Min. Lesezeit

1Ab welcher Vue-Version wird das generic-Attribut in script setup unterstützt?

Seit Vue 3.3. Vorherige Versionen kennen kein generic-Attribut auf dem script setup-Tag, generische Komponenten mussten davor umständlich über die Options API mit defineComponent nachgebildet werden.

2Wie deklariert man mehrere Typparameter gleichzeitig?

Als kommagetrennte Liste im generic-Attribut, genau wie in normalem TypeScript, zum Beispiel