在Vue文件中编写TS就比较要命了，实际上有两种编写方式，一种是Vue.extend的方式，另一种就是装饰器的方式，这里就是主要参考的https://www.jianshu.com/p/39261c02c6db，我个人还是比较倾向于装饰器的方式的，但是在小程序写组件时使用装饰器经常会出现一个prop类型不匹配的warning，不影响使用，另外无论是哪种方式都还是会有断层的问题，这个算是Vue2当时的设计缺陷，毕竟那时候TS并不怎么流行。
装饰器 装饰器 用途 描述Component 声明class组件 只要是个组件都必须加该装饰器
Prop 声明props 对应普通组件声明中的props属性
Watch 声明监听器 对应普通组件声明中的watch属性
Mixins 混入继承 对应普通组件声明中的mixins属性
Emit 子组件向父组件值传递 对应普通this.$emit()
Inject 接收祖先组件传递的值 对应普通组件声明中的inject属性
Provide 祖先组件向其所有子孙后代注入一个依赖 对应普通组件声明中的provide属性
Vue生命周期 <script> export default { beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, activated() {}, deactivated() {}, beforeDestroy() {}, destroyed() {}, errorCaptured() {} } </script> <!-- -------------------------------------------------- --> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component export default class App extends Vue { beforeCreate() {} created() {} beforeMount() {} mounted() {} beforeUpdate() {} updated() {} activated() {} deactivated() {} beforeDestroy() {} destroyed() {} errorCaptured() {} } </script> Component <script> import HelloWorld from "./hello-world.vue"; export default { components: { HelloWorld } } </script> <!-- -------------------------------------------------- --> <script lang="ts"> import HelloWorld from "./hello-world.vue"; import { Component, Vue } from "vue-property-decorator"; // `Vue`实例的所有属性都可以在`Component`编写 例如`filters` @Component({ components: { HelloWorld } }) export default class App extends Vue {} </script> Prop <script> export default { props: { msg: { type: String, default: "Hello world", required: true, validator: (val) => (val.length > 2) } } } </script> <!-- -------------------------------------------------- --> <script lang="ts"> import { Component, Vue, Prop } from "vue-property-decorator"; @Component export default class HelloWorld extends Vue { @Prop({ type: String, default: "Hello world", required: true, validator: (val) => (val.length > 2) }) msg!: string } </script> Data <script> export default { data() { return { hobby: "1111111" }; } } </script> <!-- -------------------------------------------------- --> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component export default class HelloWorld extends Vue { hobby: string = "1111111" } </script> Computed <script> export default { data() { return { hobby: "1111111" }; }, computed: { msg() { return this.hobby; } }, mounted() { console.log(this.msg); // 1111111 } } </script> <!-- -------------------------------------------------- --> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component export default class HelloWorld extends Vue { hobby: string = "1111111" get msg() { return this.hobby; } mounted() { console.log(this.msg); // 1111111 } } </script> Watch <script> export default { data() { return { value: "" }; }, watch: { value: { handler() { console.log(this.value); }, deep: true, immediate: true } } } </script> <!-- -------------------------------------------------- --> <script lang="ts"> import { Component, Vue, Watch } from "vue-property-decorator"; @Component export default class App extends Vue { value: string = " @Watch("value", { deep: true, immediate: true }) valueWatch() { console.log(this.value); } } </script> Mixins <script> // info.js export default { methods: { mixinsShow() { console.log("111"); } } } // hello-world.vue import mixinsInfo from "./info.js"; export default { mixins: [mixinsInfo], mounted() { this.mixinsShow(); // 111 } } </script> <!-- -------------------------------------------------- --> <script lang="ts"> // info.ts import { Component, Vue } from "vue-property-decorator"; @Component export default class MixinsInfo extends Vue { mixinsShow() { console.log("111"); } } // hello-world.vue import { Component, Vue, Mixins } from "vue-property-decorator"; import mixinsInfo from "./info.ts"; @Component export default class HelloWorld extends Mixins(mixinsInfo) { mounted() { this.mixinsShow(); // 111 } } </script> Emit <!-- children.vue --> <template> <button @click="$emit("submit", "1")">提交</button> </template> <!-- parent.vue --> <template> <children @submit="submitHandle"/> </template> <script lang="ts"> import children from "./children.vue"; export default { components: { children }, methods: { submitHandle(msg) { console.log(msg); // 1 } } } </script> <!-- -------------------------------------------------- --> <!-- children.vue --> <template> <button @click="submit">提交</button> </template> <script lang="ts"> import { Component, Vue, Emit } from "vue-property-decorator"; @Component export default class Children extends Vue { @Emit() submit() { return "1"; // 当然不使用装饰器`@Emit`而使用`this.$emit`也是可以的 } } </script> <!-- parent.vue --> <template> <children @submit="submitHandle"/> </template> <script lang="ts"> import children from "./children.vue"; import { Component, Vue } from "vue-property-decorator"; @Component({ components: { children } }) export default class Parent extends Vue { submitHandle(msg: string) { console.log(msg); // 1 } } </script> Provide/Inject <!-- children.vue --> <script> export default { inject: ["root"], mounted() { console.log(this.root.name); // aaa } } </script> <!-- parent.vue --> <template> <children /> </template> <script> import children from "./children.vue"; export default { components: { children }, data() { return { name: "aaa" }; }, provide() { return { root: this }; } } </script> <!-- -------------------------------------------------- --> <!-- children.vue --> <script lang="ts"> import { Component, Vue, Inject } from "vue-property-decorator"; @Component export default class Children extends Vue { @Inject() root!: any mounted() { console.log(this.root.name); // aaa } } </script> <!-- parent.vue --> <template> <children /> </template> <script lang="ts"> import children from "./children.vue"; import { Component, Vue, Provide } from "vue-property-decorator"; @Component({ components: { children } }) export default class Parent extends Vue { name: string = "aaa" @Provide() root = this.getParent() getParent() { return this; } } </script> Vuex // store/store.ts import Vue from "vue"; import Vuex, { StoreOptions } from "vuex"; import user from "./modules/user"; Vue.use(Vuex); interface RootState { version: string; } const store: StoreOptions<RootState> = { strict: true, state: { version: "1.0.0" }, modules: { user } }; export default new Vuex.Store<RootState>(store); // store/modules/user.ts import { Module } from "vuex"; export interface UserInfo { uId: string; name: string; age: number; } interface UserState { userInfo: UserInfo; } const user: Module<UserState, any> = { namespaced: true, state: { userInfo: { uId: ", name: ", age: 0 } }, getters: { isLogin(state) { return !!state.userInfo.uId; } }, mutations: { updateUserInfo(state, userInfo: UserInfo): void { Object.assign(state.userInfo, userInfo); } }, actions: { async getUserInfo({ commit }): Promise<void> { let { userInfo } = await getUserInfo(); commit("updateUserInfo", userInfo); } } }; export default user; Vuex-method <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import { State, Getter, Action } from "vuex-class"; import { UserInfo } from "./store/modules/user"; @Component export default class App extends Vue { @State("version") version!: string @State("userInfo", { namespace: "user" }) userInfo!: UserInfo @Getter("isLogin", { namespace: "user" }) isLogin!: boolean @Action("getUserInfo", { namespace: "user" }) getUserInfo!: Function mounted() { this.getUserInfo(); console.log(this.version); // 1.0.0 } } </script> 发布NPM组件