vue/detailed-props

Dlaczego

defineProps(['status', 'items']) accepts anything: a string where an array was expected reaches the template and fails there, far from the caller. The component's contract is not written anywhere, and editors cannot help the next person who uses it.

Poprawka

Use the type-based declaration in TypeScript (defineProps<{ status: 'open' | 'closed'; items: Item[] }>()) or the object form with type, required and, where useful, validator. Give optional props defaults with withDefaults or destructuring defaults (Vue 3.5).

Przykłady

// bad
const props = defineProps(['status'])
// good
const props = defineProps({ status: { type: String, required: true, validator: (v) => ['open', 'closed'].includes(v) } })

Źródła

• Vue Style Guide, Priority A (use detailed prop definitions)
• Vue docs, Props (prop validation)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain vue/detailed-props