TypeScript在Vue项目中的应用

TS教程详见我的另一篇文章 TypeScript学习笔记（超全）

1、引入Typescript

npm install vue-class-component vue-property-decorator --save

npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts

vue-property-decorator：基于vue-class-component扩展更多装饰器

ts-loader：让webpack能够识别ts文件

tslint-loader：tslint用来约束文件编码

tslint-config-standard： tslint 配置 standard风格的约束

2、配置文件

webpack配置
根据项目的不同配置的地方不同，如果是vue cli 3.0创建的项目需要在vue.config.js中配置，如果是3.0以下版本的话，需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)

      //1.在resolve.extensions中增加.ts，目的是在代码中引入ts文件不用写.ts后缀
 resolve: {
            extensions: ['.js', '.vue', '.json', '.ts'],
            alias: {}
      }
      //2.在module.rules中增加ts的rules
module: {
   rules: [ {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
   },
   {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: { appendTsSuffixTo: [/\.vue$/] }
   } ]
}

3、vue组件的编写

vue组件里大多数的方法改成通过@xxx（装饰器）来表明当前定义的为什么数据。而业务逻辑js的部分就可以直接采用ts的写法了。

基本写法

模板template和样式style的写法不变，script的模块进行了改变，基本写法如下：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Test extends Vue {

};

</script>

lang=“ts”：script张声明下当前的语言是ts
@Component：注明此类为一个vue组件
export default class Test extends Vue： export当前组件类是继承vue的

data()中定义数据

data中的数据由原来的data()方法改成直接在对象中定义

export default class Test extends Vue {
      public message1: string = "animal";
      public message2: string = "cat";
}

props传值

porp传值用@Prop装饰器

@Prop({default: '#04A8F7'})
color!: string

@Prop({default: false})
isDropDown!: boolean

default表示如果没有传过来值而使用的默认值

**属性或参数中使用 ！：表示强制解析，告诉typescript编译器，这里一定有值，常用于vue-decorator中的@Prop

**变量后使用 ！：表示类型推断排除null、undefined

$emit传值

1.不带参数

// 原来写法：this.$emit('bindSend')
// 现在直接写 this.bindSend()
// 多个定义
@Emit()
bindSend():string{
    return this.message
}

2.方法带参数

// 原来写法：this.$emit('bindSend', msg)
// 现在直接写： this.bindSend(msg)
// 多个下面的定义
@Emit()
bindSend(msg:string){
   // to do something
}

3.emit带参数

// 在逻辑中写
@Emit("sort-change")
   handleTableSortChange(sortInfo: any) {
   return sortInfo;
}

// 在模板中写
@sort-change="handleTableSortChange"

watch观察数据

// 原来的写法 watch:{}
@Watch('propA',{
   deep:true
})
test(newValue:string,oldValue:string){
   console.log('propA值改变了' + newValue);
}

computed计算属性

public get computedMsg(){
   return '这里是计算属性' + this.message;
}
public set computedMsg(message:string){

}

4、完整代码案例

<template>
  <div class="test-container">
    {{message}}
    <input type="button" value="点击触发父级方法" @click="bindSend"/>
    <input type="button" value="点击触发父级方法" @click="handleSend"/>
    <input type="button" value="点击触发父级方法" @click="bindSend2"/>
    <!-- <Hello></Hello> -->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此类为一个vue组件
@Component({
  components: {
    Hello
  }
})
export default class Test extends Vue {
  // 原有data中的数据在这里展开编写
 public message: string = "asd";
  //原有props中的数据展开编写
  @Prop({
    type: Number,
    default: 1,
    required: false
  })
  propA?: number
  @Prop()
  propB:string
  //原有computed
  public get computedMsg(){
      return '这里是计算属性' + this.message;
  }
  public set computedMsg(message:string){
  }
  //原有的watch属性
  @Watch('propA',{
      deep:true
  })
  public test(newValue:string,oldValue:string){
      console.log('propA值改变了' + newValue);
  }
  // 以前需要给父级传值的时候直接方法中使用emit就行了，当前需要通过emit来处理
  @Emit()
  private bindSend():string{
      return this.message
  }
  @Emit()
  private bindSend1(msg:string,love:string){
      // 如果不处理可以不写下面的，会自动将参数回传
    //   msg += 'love';
    //   return msg;
  }
  //原有放在methods中的方法平铺出来
  public handleSend():void {
      this.bindSend1(this.message,'love');
  }
  // 这里的emit中的参数是表明父级通过什么接受，类似以前的$emit('父级定义的方法')
  @Emit('test')
  private bindSend2(){
      return '这个可以用test接受';
  }
}
</script>