如何在 Vue 中优雅的使用 TS

TS 不使用构造选项，而是使用 class 和 @Component 。以创建 Vue 的单文件组件为例

步骤：

• @Component 引入一个 TS 支持库
• 一般使用 kaorun 343 写的第三方库vue-property-decorator，也可使用官方库vue-class-component
• 在 script 标签里声明 lang="ts"

在 TS 中使用 Prop

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
}
</script>

举个外部属性是布尔类型的栗子

// tab.vue

<template>
  <div>
      <span v-if="slotSpan">100</span>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";

@Component
export default class Tab extends Vue {
  @Prop(Boolean) slotSpan!: boolean
}
</script>

在父组件 Layout.vue 中使用 tab 组件,希望向 tab 组件传一个 slotSpan 属性为 true 值有两种方式

// 第一种
<template>
    <Tab :slotSpan="true"/>
</template>
// 第二种
<template>
    <Tab slotSpan/>
</template>

在 TS 中使用 Watch

• 附在 JS 中使用 Watch

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
   @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
}
</script>

在 TS 中使用计算属性

• 注意：不写明 Computed，直接使用 getter 属性

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  get recordList() {
    return (this.$store.state as RootState).recordList;
  }
}
</script>

在 TS 中使用 Mixins

• Mixins 部分：

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component
export class CheckDateList extends Vue {
  numberFilter(value: any) {
    return parseFloat(value).toFixed(2);
  }
}

export default CheckDateList;

• 在组件中使用：

<script lang="ts">
import {Component} from "vue-property-decorator";
import {mixins} from "vue-class-component";
import CheckDateList from "@/mixins/CheckDateList";

@Component
export default class Detail extends mixins(CheckDateList) {
}
</script>

在 TS 中使用 组件

举个栗子：在 Account.vue 中使用 Tab.vue

<template>
    <Tab/>
</template>

<script lang="ts">

import {Vue, Component} from "vue-property-decorator";
import Tab from "@/components/Account/Tab.vue";

@Component({
  components: {Topbar, Tab}
})
export default class Account extends Vue {};
</script>