范例，HelloWorld.vue
<template>
<div>
<!-- 新增 -->
<input type="text" @keyup.enter="addFeature" />
<div v-for="item in features" :key="item.id" :class="{selected: item.selected}">{{ item.name }}</div>
<div>{{count}}</div>
</div>
</template>
<script lang="ts">
// import { Vue } from "vue-property-decorator";
import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
import { FeatureSelect } from "@/types";
// 泛型方法
function getList<T>(): Promise<T> {
return Promise.resolve([
{ id: 1, name: "类型注解", selected: false },
{ id: 2, name: "编译型语言", selected: true }
] as any);
}
@Component
export default class HelloWorld extends Vue {
// 括号里面是传给vue的配置
@Prop({type: String, required: true})
msg!: string;
// message = 'class based component'
// ts特性展示，!是赋值断言，表示该属性一定会被赋值，编译器不用警告
features: FeatureSelect[] = [];
// 生命周期直接用同名方法即可
async created() {
// this.features = await getList<FeatureSelect[]>();
const resp = await this.$axios.get<FeatureSelect[]>('/api/list')
this.features = resp.data
}
@Watch('msg')
onMsgChange(val:string, old:string) {
console.log(val);
}
// 回调函数直接声明即可
@Emit('add-feature')
addFeature(e: KeyboardEvent) {
// 断言为Input，一般当一些类型需要变得更具体的时候需要使用as断言
// 这里把EventTarget类型断言为它的子类HTMLInputElement
// 通常编程者比编译器更清楚自己在干什么
const inp = e.target as HTMLInputElement;
const feature: FeatureSelect = {
id: this.features.length + 1,
name: inp.value,
selected: false
};
this.features.push(feature);
inp.value = "";
// 返回值作为事件参数
return feature
}
// 访问器当做计算属性
get count() {
return this.features.length;
}
}
</script>
<style scoped>
.selected {
background-color: rgb(205, 250, 242);
}
</style>
声明文件
使用ts开发时如果要使用第三方js库的同时还想利用ts诸如类型检查等特性就需要声明文件，类
似 xx.d.ts
同时，vue项目中还可以在shims-vue.d.ts中对已存在模块进行补充
npm i @types/xxx
范例:利用模块补充$axios属性到Vue实例，从而在组件里面直接用
// main.ts
import axios from 'axios'
Vue.prototype.$axios = axios;
// shims-vue.d.ts
import Vue from "vue";
import { AxiosInstance } from "axios";
declare module "vue/types/vue" {
interface Vue {
$axios: AxiosInstance;
}
}
范例:给krouter/index.js编写声明文件，index.d.ts
import VueRouter from "vue-router";
declare const router: VueRouter
export default router
装饰器
装饰器用于扩展类或者它的属性和方法。@xxx就是装饰器的写法
常见的有@Prop,@Emit,@Watch
具体使用见文章开头的例子
状态管理推荐使用:vuex-module-decorators
vuex-module-decorators 通过装饰器提供模块化声明vuex模块的方法，可以有效利用ts的类型系
统。
安装
npm i vuex-module-decorators -D
根模块清空，修改store/index.ts
export default new Vuex.Store({})
定义counter模块，创建store/counter
import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-
decorators'
import store from './index'
// 动态注册模块
@Module({ dynamic: true, store: store, name: 'counter', namespaced: true }) class CounterModule extends VuexModule {
count = 1
@Mutation
add() {
// 通过this直接访问count
this.count++
}
// 定义getters
get doubleCount() {
return this.count * 2;
}
@Action
asyncAdd() {
setTimeout(() => {
// 通过this直接访问add this.add()
}, 1000);
} }
// 导出模块应该是getModule的结果
export default getModule(CounterModule)
使用，App.vue
<p @click="add">{{$store.state.counter.count}}</p>
<p @click="asyncAdd">{{count}}</p>
import CounterModule from '@/store/counter'
@Component
export default class App extends Vue {
get count() {
return CounterModule.count
}
add() {
CounterModule.add()
}
asyncAdd() {
CounterModule.asyncAdd()
} }
装饰器原理
装饰器是工厂函数，它能访问和修改装饰目标。
类装饰器，07-decorator.ts
//类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。 function log(target: Function) {
// target是构造函数
console.log(target === Foo); // true target.prototype.log = function() {
console.log(this.bar);
}
}
@log
class Foo {
bar = 'bar'
}
const foo = new Foo();
// @ts-ignore
foo.log();
方法装饰器
function rec(target: any, name: string, descriptor: any) { // 这里通过修改descriptor.value扩展了bar方法
const baz = descriptor.value;
descriptor.value = function(val: string) {
console.log('run method', name);
baz.call(this, val);
}
}
class Foo {
@rec
setBar(val: string) {
this.bar = val
} }
foo.setBar('lalala')
属性装饰器
// 属性装饰器
function mua(target, name) {
target[name] = 'mua~~~'
}
class Foo {
@mua ns!:string;
}
console.log(foo.ns);
稍微改造一下使其可以接收参数
function mua(param:string) {
return function (target, name) {
target[name] = param
}
}
