老师你好,对于CatResult我有一点疑问
来源:3-14 模块化结合typescript - 泛型改造
qq_我在时光机里找回忆
2020-10-30
这一节课,我觉得typescript的泛型真的非常奇妙了,就像挖了个坑,然后往里面填什么东西,就当它是什么东西来使用。我对传入不同的类型后对逻辑进行的改写,实现获取猫狗图片的例子的流程没有问题,就是有一点点小小的疑问。
我看到了catapi返回的数据是数组,数组里的元素有breeds属性,您讲课的时候忽略了,我因为不知道该写成什么类型的数组所以也忽略了,结果我最后正常得到了猫图片的数据。
//发请求,并处理结果
axios.get(url).then((rawData) => {
// 假如成功了,那么就隐藏loading,让结果有数据,让loaded为true
loading.value = false
// result的值就来自于我们请求的结果
result.value = rawData.data
loaded.value = true
}).catch((err) => {
// 假如失败了,就给error赋值,也隐藏loading
error.value = err
loading.value = false
})
然后我思考这段代码执行的过程,是这样的:“首先往useURLLoader函数传入CatResult[]类型,然后定义了几个要使用的数据,接着发起异步请求,请求得到结果后把axios返回的对象的data属性赋值给CatResult[]类型的result……” 到这里我就感觉有点奇怪了,我得到的数据应该是有breeds属性的,而我定义类型CatResult里并没有这个属性,那这两个应该是不一样的类型啊,为什么可以正常赋值呢?
// 创建另一个作为结果的另一种数据类型(猫类型)
interface CatResult {
id: string;
url: string;
width: number;
height: number;
}
我试着把result.value[0]输出来看看,发现是Proxy,我把target点开了,发现它代理的对象里有breeds属性,值为空数组,说明这个CatResult里没有的属性并没有被忽略。那为什么CatResult数组收到的元素带有它不知道的属性也不会报错呢?
我不是因为出错了有疑问,而是因为没有错才觉得奇怪,觉得跟之前学到的interface定义对象的形状的知识不太符合。望老师不要觉得我没事找事哈。
1回答
-
同学你好 非常感谢你的认真思考欧
首先我们要搞清楚 typescript 是编译阶段的处理器
也就是说所有数据类型定义都是我们自己写的 所以你的 CatResult 随便写多少属性都没关系。
为了让我们在写代码的时候更快速 更便捷 更安全。
但是它最终是要编译成 js,并且运行的是js,所以最终运行的结果,ts 是没法控制的,它不会检查最终的结果,它最后返回多少属性都是确定的。
012020-11-02
相似问题