Difference between defineProps<({})>() and defineProps({ }) syntax?-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

Inside the angular brackets, you specify the generic type of the props you receive in your component ( this syntax is valid on typescript not javascript )

For example, you receive age and name props.

With javascript

defineProps({
  age: number,
  name: string,
})

With typescript, you can do the same as javascript, but if there are type mismatches you will get a warning on the runtime, or define types via generics where you get errors in compile time

const props = defineProps<{
  age: number,
  name: string
}>()