vue.js defineProps〈({})>()和defineProps({ })语法之间的区别？

qq24tv8q 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(365)

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

我如何定义道具

defineProps({
 
})

其他开发人员如何定义道具

defineProps<({
 
})>()

我想知道这两种语法有什么区别。
提前致谢
实际上我不知道在Vue3脚本设置中定义道具的两种不同的语法。所以，我试着问一个问题，这样我就可以理解这两种语法。

2条答案

不同之处在于语言（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

在尖括号内，指定在组件中接收的props的泛型类型（此语法在typescript上有效，在javascript上无效）
例如，您会收到age和name属性。
使用javascript

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

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

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