VUE 在vue2项目中使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 文件中更改)

# 2.1 在 webpack.base.conf 文件中更改

# 2.1.1. 在 resolve.extensions 中增加.ts，目的是在代码中引入 ts 文件不用写.ts 后缀

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {}
}

已复制

# 2.2.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$/],
      },
    },
  ];
}

已复制

# 2.2.3. tsconfig.json 配置

ts-loader 会检索文件中的 tsconfig.json 以其中的规则来解析 ts 文件，详细的配置可以参考https://www.tslang.cn/docs/handbook/tsconfig-json.html 我项目的 tsconfig.json 文件

{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": false,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"]
    },
    // 编译过程中需要引入的库文件的列表
    "lib": ["dom", "es2015", "es2015.promise"]
  }
}

已复制

# 2.2.4. tslint.json 配置

在目录中新增 tslint.json 文件，由于我们前面安装了 tslint-config-standard，所以可以直接用 tslint-config-standard 中规则，文件如下:

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

已复制

# 2.2 在 vue.config.js 文件中更改以下代码即可

configureWebpack: {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
     alias: {}
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      }
    ]
  }
},

已复制

# 3、让项目识别.ts

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在根目录下

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

已复制

# 4、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 = 'heimayu';
  public message2: string = '真好看';
}

已复制

生命周期

// 生命周期
private created(){
  this.init();
}

已复制

方法

private init(){
  console.log('halo');
}

已复制

props 传值 props 的话就没有 data 那么舒服了，因为他需要使用装饰器了，写法如下

@Prop()
propA:string

@Prop()
propB:number

已复制

$emit 传值不带参数

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

已复制

方法带参数

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

已复制

emit 带参数

// 这里的test是改变组件引用的@事件名称这时候要写@test 而不是@bindSend2
@Emit('test')
private bindSend2(){
  return '这个可以用test接受';
}

已复制

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){
}

已复制

完整代码案例

<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>

已复制

目录