typescript在vue2项目中的使用方法

项目配置在此不再做说明，本文是为了让新手更快熟悉ts在vue2.x中的使用。

以下默认读者已掌握vue的基础开发。

一、vue模板设置

在改造.vue文件前，我们需要安装一个插件vue-property-decorator

为了让webpack把script内的代码识别为ts，除了需要改造一下script标签内的内容，其他地方都无需修改

<script lang="ts">
</script>

二、常用装饰器的使用

装饰器用于扩展类或者它的属性和方法。@xxx就是装饰器的写法

常见的有@Prop,@Emit,@Watch等等

<script lang="ts">
import { Component, Vue, Watch  } from 'vue-property-decorator';
@Component()
export default class Home extends Vue {
    // data中的参数   
    private str: boolean = 'aaa';  
        //  Watch --> 监听
    @Watch('config')  
    onConfigChange(val: any, oldVal: any) {    
    }
 
  //  生命周期直接用同名方法即可,mounted同理
    private created(){
        this.init();
    }
 
  // 方法 --> 相当于methods中的方法
    private init(){
        console.log('init');
    }
        // 访问器当做计算属性 --> 相当于computed
        //computed： {
    //  count() { 
    //    return this.str.length
    //  }
    //}
    get count() {
      return this.str.length
    }
}
</script>

三、组件引入方式

在导入vue文件的时候，要写上.vue后缀，因为TypeScript默认识别ts文件

<script lang="ts">
    import Test from './test.vue'; // 引入Test组件
    import { Component, Prop, Vue, Watch  } from 'vue-property-decorator';
    
  @Component({    
      components: {      
          Test    
      }
  })
    export default class Home extends Vue {
    // xxx
  }
</script>

四、父子组件通信

众所周知，父 -> 子 传值，子组件通过props接收参数， 子 -> 父组件 通过emit 传值

在ts中如下:

子组件HelloWorld

<template>
  <div>
    <h1>HelloWorld 组件</h1>
    <div>父组件传值{{ msg }}</div>
    <el-button @click="onClick">点我向父组件传值</el-button>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  // 括号中的是传给vue的配置
  // ts特性展示，!是赋值断言，表示该属性一定会被赋值，编译器不用警告
  @Prop({ type: String, required: true }) private msg!: string

  clickCount: number = 0 // ts自带类型推断，也可写为 clickCount = 0

  @Emit()  // 回调函数直接声明即可
    // 或 @Emit('on-click') 
  onClick() {
    this.clickCount += 1
    return this.clickCount
  }
}
</script>

父组件Home

<template>
  <div class="home">
    <el-input v-model="msg"></el-input>
        // 传值与js版本无异
    <HelloWorld :msg="msg" @on-click="onChildClick" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue'
@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  // data
  msg = 'aaa'
  onChildClick(e: number) {
    console.log('child:', e)
  }
}
</script>

五、状态管理

在js版本中，我们一般使用vuex来做状态管理，ts中，我们可用`vuex-module-decorators`做状态管理

import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from './index'
// 动态注册模块设置，跟js类似
@Module({ 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)


// 在组件中使用
<template>
  <p @click="add">{{$store.state.counter.count}}</p>
    <p @click="asyncAdd">{{count}}</p>
</template>

<script lang="ts">
  import CounterModule from '@/store/counter'
  @Component
  export default class Home extends Vue {
    get count() {
      return CounterModule.count
    }
    add() { // 相当于js版本中 this.$store.commit('count/add')
      CounterModule.add()
    }
    asyncAdd() { // 相当于js版本中 this.$store.dispatch('count/add')
      CounterModule.asyncAdd()
    } 
  }
</script>