}
// shims.jsx.d.ts
import Vue, { VNode } from "vue";
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
它们是作什么用的呢？
shims.vue.d.ts给所有.vue文件导出的模块声明了类型为Vue，它可以帮助IDE判断.vue文件的类型。
shims.jsx.d.ts 为 JSX 语法的全局命名空间，这是因为基于值的元素会简单的在它所在的作用域里按标识符查找。当在 tsconfig 内开启了 jsx 语法支持后，其会自动识别对应的 .tsx 结尾的文件，(也就是Vue 单文件组件中<script lang=”tsx”></script>的部分)可参考
官网 tsx
基本用法
在vue 2.x中使用class的方式书写vue组件需要依靠vue-property-decorator来对vue class做转换。
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
export default class extends Vue {
@Prop({ default: 'default msg'}) private msg!: string;
name!: string;
show() {
console.log("this.name", this.name);
}
}
</script>
导出的class是经过Vue.extend之后的VueComponent函数（理论上class就是一个Function）。
其最后的结果就像我们使用Vue.extend来扩展一个Vue组件一样。
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})export default {
components: {
Profile
}
}
注意上面的Profile组件并不是和我们平时一样写的Vue组件是一个plain object配置对象，它其实是一个VueComponent函数。
父组件实例化子组件的时候，会对传入的vue object 进行扩展，使用Vux.extend转换为组件函数。
如果components中的值本身是一个函数，就会省略这一步。这一点， 从Vue 源码中可以看出。
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}
上面的Ctor就是在components中传入的组件，对应于上面导出的Profile组件。
使用vuex
使用vuex-class中的装饰器来对类的属性做注解。
import Vue from 'vue'import Component from 'vue-class-component'import {
State,
Getter,
Action,
Mutation,
namespace
} from 'vuex-class'
