Vue3 TS props传参报错TS2722: Cannot invoke an object which is possibly ‘undefined‘.

**Vue3 TS Props传参报错解决**

在使用 Vue3 和 TypeScript 时，我们经常会遇到一个问题：Props传参时，TS 会报出错误 `TS2722: Cannot invoke an object which is possibly ‘undefined‘.`。这个问题是由于 TypeScript 的类型检查机制导致的。

**什么是 Props？**

Props 是 Vue 组件之间通信的一种方式，它允许父组件向子组件传递数据。在 Vue3 中，Props 是一个非常重要的概念，它使得我们可以轻松地在组件之间共享数据。

**什么是 TS2722 错误？**

TS2722 错误是 TypeScript 的类型检查错误之一，它会在我们尝试访问可能为 `undefined` 的对象时报出。这个错误通常发生在我们使用 Props 时，尤其是在使用 `v-bind` 或 `:propName`语法传递 Props 时。

**示例代码**

假设我们有一个父组件 `Parent.vue` 和子组件 `Child.vue`：

vue// Parent.vue<template>
 <div>
 <child :name="name" />
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Child from './Child.vue';

export default defineComponent({
 name: 'Parent',
 components: { Child },
 data() {
 return {
 name: 'John Doe', // 这里是 Props 的值 };
 },
});
</script>

vue// Child.vue<template>
 <div>
 {{ name }}! <!-- 这里尝试访问 Props -->
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
 name: 'Child',
 props: {
 name: String, // 这里定义了 Props 的类型 },
});
</script>

**TS2722 错误的原因**

在上面的示例代码中，我们尝试访问 `name` Props，但是由于 TypeScript 的类型检查机制，它会认为 `name` 可能为 `undefined`。因此，TS 会报出错误 `TS2722: Cannot invoke an object which is possibly ‘undefined‘.`。

**解决方法**

要解决这个问题，我们需要告诉 TypeScript r?ng `name` Props 是必传的，并且它的类型是 `string`。我们可以通过在子组件中添加一个 `required` 属性来实现：

ts// Child.vueprops: {
 name: { type: String, required: true }, // 这里添加了 required 属性},

**完整代码**

下面是完整的示例代码：

vue// Parent.vue<template>
 <div>
 <child :name="name" />
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Child from './Child.vue';

export default defineComponent({
 name: 'Parent',
 components: { Child },
 data() {
 return {
 name: 'John Doe', // 这里是 Props 的值 };
 },
});
</script>

vue// Child.vue<template>
 <div>
 {{ name }}! <!-- 这里尝试访问 Props -->
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
 name: 'Child',
 props: {
 name: { type: String, required: true }, // 这里添加了 required 属性 },
});
</script>

**结论**

通过在子组件中添加 `required` 属性，我们可以告诉 TypeScript r?ng Props 是必传的，并且它的类型是 `string`。这样就可以避免 TS2722 错误的出现。