老师你好,对于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回答

张轩

2020-10-31

同学你好 非常感谢你的认真思考欧

 首先我们要搞清楚 typescript 是编译阶段的处理器 

也就是说所有数据类型定义都是我们自己写的 所以你的 CatResult 随便写多少属性都没关系。

为了让我们在写代码的时候更快速 更便捷 更安全。

但是它最终是要编译成 js,并且运行的是js,所以最终运行的结果,ts 是没法控制的,它不会检查最终的结果,它最后返回多少属性都是确定的。

0
1
qq_我在时光机里找回忆
谢谢老师,我明白了。之前是脑子没转过弯来,误以为执行的时候还是要按照这个ts写的来,js在执行的时候赋值那就完全没有问题了
2020-11-02
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程