vue3中defineProps 接收对象属性时 传入过来的对象属性的格式错误的话 ts为什么没有报警告?

父组件

<template>
  <div class="person">
      我是父组件
     <Child :person="person"/>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue"
import Child from "./Child.vue"
const person = reactive({
  name:"zhangsan",
  age: "我应该是数字类型的,但是我现在故意赋值字符串"
})
</script>

子组件

<template>
  <div class="child">
    我是子组件
    <div>我是父组件传过来的对象类型:{{ person.name }} --- {{person.age}}</div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, toRefs, computed, defineEmits } from "vue";

interface Person {
  name: string;
  age: number;
}
interface UserInfoProps {
  person: Person;
}
const props = defineProps<UserInfoProps>();
</script>

我在父组件定义了perosn对象({
name:"zhangsan",
age:90
})然后传递给子组件,然后在子组件定义了defineProps的数据类型接口,
interface Person {
name: string;
age: number;
}
interface UserInfoProps {
person: Person;
}
现在有个问题,我什么我修改了父组件的person的name和age属性故意改错了,age本来应该是数值类型的,我改成字符串类型后,子组件的typescript并没有报警告呢,各位大神帮忙看看什么原因呢,感谢!!!

阅读 1k
1 个回答

vue sfc 的类型提示依赖 volar 扩展,首先检查下 volar 是否正常工作。而且报错的应该是父组件,子组件是不会报错的。

推荐问题
logo
Microsoft
子站问答
访问
宣传栏