父组件
<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并没有报警告呢,各位大神帮忙看看什么原因呢,感谢!!!
vue sfc 的类型提示依赖 volar 扩展,首先检查下 volar 是否正常工作。而且报错的应该是父组件,子组件是不会报错的。