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
JavaScript
x
4
1
defineProps({
2
3
})
4
How other developer define props
JavaScript
1
4
1
defineProps<({
2
3
})>()
4
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):
JavaScript
1
7
1
<script setup>
2
const props = defineProps({
3
foo: String,
4
bar: Number
5
})
6
</script>
7
TS
(strongly typed):
JavaScript
1
7
1
<script setup lang="ts">
2
const props = defineProps<{
3
foo: string
4
bar?: number
5
}>()
6
</script>
7
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