插件
- vue-class-component
强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 - vue-property-decorator
在 vue-class-component 上增强更多的结合 Vue 特性的装饰器 - vuex-class
基于vue-class-component对Vuex提供的装饰器
vue-class-component
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class App extends Vue {
// 初始化数据
msg = 123
// 声明周期钩子
mounted () {
this.greet()
}
// 计算属性
get computedMsg () {
return 'computed ' + this.msg
}
// 方法
greet () {
alert('greeting: ' + this.msg)
}
}
</script>
改造.vue
- <script>标签添加lang=”ts”声明
- 代码中导入 *.vue 文件的时候,需要写上 .vue 后缀
原因还是因为 TypeScript 默认只识别
.ts 文件,不识别 .vue 文件import Component from ‘components/component.vue’
参考链接:
从 JavaScript 到 TypeScript 6 – Vue 引入 TypeScript
Vue2.5+ Typescript 引入全面指南
可能是最全的Vue-TypeScript教程(附实例代码和一键构建工具)