vue项目中使用ts入门

最近项目需要将原vue项目结合ts的使用进行改造，这个后面应该是中大型项目的发展趋势，看到一篇不错的入门教程，结合它并进行了一点拓展记录之。本文从安装到vue组件编写进行了说明，适合入门。

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.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"
    ]
  }
}

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

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

3、让项目识别.ts

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

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

4、vue组件的编写

vue组件里大多数的方法改成通过@xxx（装饰器）来表明当前定义的为什么数据，类似ng中的注入。而业务逻辑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 = "真好看";
}

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

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>

文章来源 :https://www.cnblogs.com/webhmy/p/13690836.html

vue-property-decorator

这个组件完全依赖于vue-class-component.它具备以下几个属性:

@Component (完全继承于vue-class-component)

@Emit

@Inject

@Provice

@Prop

@Watch

@Model

Mixins (在vue-class-component中定义);

使用

当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

<script lang="ts">

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



  @Component({})

  export default class "组件名" extends Vue{

​    ValA: string = "hello world";

​    ValB: number = 1;

  }

</script>

等同于

<script>

  import Vue from 'vue';



  export default {

​    data(){

​      return {

​        ValA: 'hello world',

​        ValB: 1

​      }

​    }

  }

</script>

父组件Index.vue

<template>

  <div>

​    {{ count }}

​    <a-button type="primary" @click="countAdd">增加a-button>

        <p>total: {{ total }}p>

        <p>prop-a: {{ propA }}p>

​    <Home @returnParent="handlerChildValue"/>

​    

   div>

template>

<script lang="ts">

import Home from '../views/Home.vue'

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

const sessionMenus: string | null = sessionStorage.getItem('menus')



@Component({

 components: { Home }

})



export default class Layout extends Vue {

 // prop !表示这个prop一定有值 ? 代表可选参数

 @Prop({ default: 'propa' }) private propA!: string

 @Prop() private propB?: string

 @Prop() private propC: any



 // data

 private menus: any[] = sessionMenus ? JSON.parse(sessionMenus) : []

 private count: number = 0



 // watch

 @Watch('count')

 private onChangeCount (val: number) {

  console.log(val)

 }



 // 计算属性

 // 原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数.

 get total () {

  return this.count + 10

 }



 // 生命周期

 private created () {

  console.log(this.menus)

 }



 // methods 直接写

 private countAdd (): void {

  this.count ++

 }



 // Emit

 private handlerChildValue (obj: object) {

  console.log(obj)

 }

}

script>

index.vue 代码等同于

<script>

import Home from '../views/Home.vue'

export default {

 components: { Home },

 props: {

  propA: {

   type: String,

   required: true,

   default: 'propa'

  },

  propB: {

   type: String

  }

 },

 data () {

  return {

   menus: sessionMenus ? JSON.parse(sessionMenus) : [],

   count: 0

  }

 },

 watch: {

  count: {

   onChangeCount (newVal) {

​    console.log(newVal)

   },

   deep: true

  }

 },

 computed: {

  total () {

   return this.count + 10

  }

 },

 created () {

  console.log(this.menus)

 },

 methods: {

  countAdd () {

   this.count ++

  },

  handlerChildValue (obj: object) {

   console.log(obj)

  }

 }

}

script>

子组件Child.vue

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

  <a-button @click="backParent">子组件a-button>

 div>

template>



<script lang="ts">

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

@Component

export default class Home extends Vue {

 // 写法一 emit()括号里不写函数名 函数名为驼峰 在父组件接收函数要采用(驼峰式会转为横杠式写法) return-parent

 // @Emit()

 // private returnParent (): object {

 //  return { msg: '我是子组件返回的对象' }

 // }



 // 写法二: 注意，这时父组件接收值时是用@Emit("returnParent")括号中的returnParent接收的，returnParent会把正面的方法名字覆盖。

 // （treturnParent）是自定义的 在父组件接收函数要采用 returnParent驼峰

 @Emit('returnParent')

 private backParent (): object {

  return { msg: '我是子组件返回的对象' }

 }

}

script>

Child.vue等同于

<script>

export default {

 methods: {

  backParent () {

   this.$emit('returnParent', { msg: '我是子组件返回的对象' })

  }

 }

}

script>

转自: https://www.jianshu.com/p/bf26426a0f64