Typed Props and Emits with defineProps/defineEmits
Generic defineProps (), complex types, optional props, emit typing.
Typing Component Inputs and Outputs
With lang="ts", the defineProps and defineEmits macros accept TypeScript types directly. This gives compile-time checks on what data flows in and out of a component.
Props From an Interface
Pass a type to the defineProps generic. An interface keeps complex prop shapes readable and reusable.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>All lessons in this course
- TypeScript Setup in Vue Projects
- Typed Props and Emits with defineProps/defineEmits
- Typing Composables and Refs
- Generic Vue Components