vue3_04_简单介绍ts的接口、泛型、自定义类型

24 - 回顾TS中的接口、泛型、自定义类型

ts这个东西TMD有什么用处；

引子

第一个，如果你写上面的person对象的时候，name这个单词写错了，是不是没有给你提示的？

第二个，你的这个person对象传递给一个文件，再传递一个文件，经历了一些特殊的处理之后，就又传递给了另外的地方；

然后你再次进行person点属性的时候很有可能就是什么都点不出来了；

这个时候就要上TS了；

要求

person有三个属性：id，name，age；

一般做项目都会有一个文件夹叫做types；

问题：为什么文件名字叫做index.ts

因为index.ts这个名字，我们就是看中了index这个名字；

我们去其他地方引入这个玩意的时候，我的引入路径只需要写到/types就可以了，省事一点；

矫情；

需求：定义一个接口限制person对象

插曲：暴露export有几种方式？

一共是有三种的；

• 默认暴露：export default
• 分别暴露：export
• 统一暴露

插曲：引入的时候@符号表示的是什么

其实TMD，就是src的目录；

引入的小主意点

看上面的图片，我们直接引入typescript的接口，就会报错；

类似上面的写法是不对的；

不对的；

不对的；

这是为什么呢？

为什么a是可以的，但是PersonInter就是不可以的呢？

这到底是为什么的呢？

这是因为a是一种值；MD的，PersonInter不是值；

所以，提醒我们引入的时候，要用下面的写法：

看看ts接口好用不

你看上面，我们的name拼写错了，直接TMD就飘红了；

好用的好用的；

有人说ts麻烦，但是麻烦就是规范；

上面的ts接口就是限制了一个对象

我有一个list怎么限制？

这个玩意就是泛型；

这个意思就是我有一个personList，它的这个玩意是一个Array，然后里头的每一个元素都是符合PersonInter这种接口的；

大致上就是这个意思；

这不是一个高级的写法；

高级写法 - 自定义类型

换一种写法

这个就是第二种写法的；其实就是数组的另外的一个写法；