defineProps<({})>() 和 defineProps({ }) 语法之间的区别？

Question

实际上，我读过一些人的代码，他们使用defineProps<({})>()语法定义道具，我对此进行了研究，但没有发现任何有助于我理解这种语法的东西。

我如何定义道具

defineProps({

})

其他开发者如何定义道具

defineProps<({

})>()

我想知道这两种语法之间有什么区别。

提前感谢

实际上，我不知道在Vue3脚本设置中定义道具的两种不同语法。所以，我试着问一个问题，这样我就能理解这两种语法。

Answer 1

区别在于语言(Javascript/TypeScript(。

JS(弱类型(:

<script setup>
const props = defineProps({
foo: String,
bar: Number
})
</script>

TS(强类型(:

<script setup lang="ts">
const props = defineProps<{
foo: string
bar?: number
}>()
</script>

所以在TypeScript中，你需要告诉类型，而在JavaScript中，你不需要。

相关文档：https://vuejs.org/guide/typescript/composition-api.html

Answer 2

在尖括号内，指定组件中接收的props的通用类型(此语法在typescript而非javascript上有效(

例如，您将收到age和name道具。

使用javascript

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

使用typescript，您可以执行与javascript相同的操作，但如果存在类型不匹配，您将在运行时收到警告，或者通过泛型定义类型，在编译时中会出现错误

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