Actually, I read someone code and they define props using defineProps<({})>() syntax and I research about it and didn’t find anything which helps me to understand about this syntax.
How I Define Props
defineProps({
})
How other developer define props
defineProps<({
})>()
I want to know what’s the difference between both syntax.
Thanks in Advance
I actually don’t know about two different syntax of defining props in Vue 3 script setup. So, I’ve tried to ask a question so that I can understand about both syntaxes.
Advertisement
Answer
The difference is the language (Javascript / TypeScript).
JS (weakly typed):
<script setup>
const props = defineProps({
foo: String,
bar: Number
})
</script>
TS (strongly typed):
<script setup lang="ts">
const props = defineProps<{
foo: string
bar?: number
}>()
</script>
So in TypeScript you need to tell the type, while in JavaScript you don’t.
Related docs: https://vuejs.org/guide/typescript/composition-api.html