Vue3.0+ts项目初体验总结

今天第一次接触vue3+ts的项目，非常不适应，好多地方和vue2+js区别还是很大的，这篇文章就总结一下自己在项目中遇到的问题，这篇文章是写给自己的，记录下来，防止以后忘记，小伙伴们可能看起来有点费力

 1.为什么定义数组要添加required:true

如果不加的话在setup()中使用时它的类型是undefined或string,加了之后就成了string

 2.把构造函数断言成类型

引入propType,

 3.   在template模板中怎么使用代码自动补全

1.下载  插件  vetur  在设置中配置如下代码

 "vetur.experimental.templateInterpolationService": true

 

 4.ts中数组定义的几种方式

如果你作过一些项目，你就会知道真实的项目中数组中一定会有对象的出现。那对于这类带有对象的数组定义就稍微麻烦点了。 比如现在我们要定义一个有很多小姐姐的数组，每一个小姐姐都是一个对象。这是的定义就编程了这样。

const xiaoJieJies: { name: string, age: Number }[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

 这种形式看起来比较麻烦，而且如果有同样类型的数组，写代码也比较麻烦，TypeScript 为我们准备了一个概念，叫做类型别名(type alias)。

比如刚才的代码，就可以定义一个类型别名，定义别名的时候要以type关键字开始。现在定义一个Lady的别名。

type Lady = { name: string, age: Number };

有了这样的类型别名以后哦，就可以把上面的代码改为下面的形式了。

type Lady = { name: string, age: Number };

const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

这时候有的小伙伴就会问了，我用类进行定义可以吗？答案是可以的，比如我们定义一个Madam的类,然后用这个类来限制数组的类型也是可以的。

class Madam {
  name: string;
  age: number;
}

const xiaoJieJies: Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

5.ts中不支持require导入图片

解决办法：网上有很多，我也不知道我的莫名其妙就好了