Vue中使用TypeScript

如题所述

第1个回答  2022-07-20

​ Tip: 这篇文章是我用到了typescript后写的,因为刚接触没多久,写得不好多多海涵,栗子用了另外一位作者的,在此表示感谢,vue3.x开始会慢慢向typescript靠拢,所以学习ts是非常有必要的, 阅读本文需要具备一定的TypeScript基础和vue基础。

当我们在 vue 单文件中使用 TypeScript 时,引入 vue-property-decorator 之后, script 中的标签就变为这样:

等同于:

把我们需要用到的属性给导入进来,在这里我导入了Component;这是 vue-property-decorator 组件提供的属性,至于有哪些属性下面我会说到。

相信很多小伙伴也注意到我使用了和以往不同的写法,使用了es6的类的写法,至于为何可以使用这种写法就是因为这个组件是完全依赖于 vue-class-component ;这是尤大神写的支持vue的组件, 具体可看 。建议先看看~

Tip:(很重要的一点):在类中声明的变量其实和data中声明的是一样的,都是有双向绑定的;也就是例子中的ValA和ValB有了类型指定同时能双向绑定

这个组件完全依赖于 vue-class-component .它具备以下几个属性:

因为我个人也刚学ts没多久,写得不好,还请多多海涵。后续会继续更新。