Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件

简介: Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件

一、前言

Vue.js 是一个非常受欢迎的前端框架,它能够快速构建交互性强的单页面应用。而 vue-property-decorator 是一个用于 Vue.js 的装饰器库,可以帮助我们更方便地编写 Vue.js 组件。下面来详细讲解 vue-property-decorator 的用法。


vue-class-component 是 vue 的官方库,作用是用类的方式编写组件,这种编写方式可以让 .vue 文件的 js 结构更扁平化,并使 vue 组件可以使用继承、混入等高级特性。


目前 2.x 跟 TS 的整合,通常需要基于 vue-class-component 来用基于 class 的组件书写方式


vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:

官方文档:https://class-component.vuejs.org/


vue-property-decorator是社区出的

官网 https://www.npmjs.com/package/vue-property-decorator

vue-property-decorator使我们能在vue组件中写TypeScript语法


vue-property-decorator深度依赖了vue-class-component拓展出了更多操作符 @Prop @Model @Watch @Provide @Inject @Emit等

可以说是 vue-property-decorator是 vue-class-component的一个超集

正常开发的时候,你只需要使用vue-property-decorator中提供的操作符即可 不用再从vue-class-componen引入 vue、component


装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。


二、安装

1、原项目安装
npm i -S vue-class-component
npm i -S vue-property-decorator


2、使用 vue-cli 搭建新项目

vue create hello-world

选择 “Manually select features” 来手动选择特性,

勾选上 TypeScript(因为要使用装饰器语法)

勾选 “Use class-style component syntax?”


三、使用

1、 基本写法

template和css的写法不变,只是script内的写法需要注意

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

};
</script>

lang=“ts”:script声明当前语言是ts

@Component:注明此类为一个vue组件

App 组件名称

export default class Test extends Vue: export当前组件类是继承vue的

2、@component

@Component({})可以声明components、filter、directives等未提供装饰器的vue选项,也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等


即使没有组件也不能省略@Component,否则会报错。

<template>
  <div>
    <componentA></componentA>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { componentA } from "@/components";

@Component({
  //组件
  components: {
    componentA,
  },
})
export default class HelloWorld extends Vue {
    
}
</script>
3、Data属性

data属性初始化可以被声明为类的属性。

<template>
  <div>{{ message }}</div>
</template>

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

// 即使没有组件也不能省略@Component
@Component({})
export default class HelloWorld extends Vue {
  // 定义的变量
  message: string = "Hello World!";
}
</script>
4、Methods属性

组件方法可以直接声明为类的原型方法:

<template>
  <button v-on:click="hello">Click</button>
</template>

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

@Component({})
export default class HelloWorld extends Vue {
  // 方法
  hello() {
    console.log("Hello World!");
  }
}
</script>
5、Computed 计算属性

计算属性可以声明为类属性getter/setter:

对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可

<template>
  <input v-model="name" />
</template>

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

@Component({})
export default class HelloWorld extends Vue {
  // 定义的变量
  firstName: string = "John";
  lastName: string = "Doe";

  // 计算属性
  get name() {
    return this.firstName + " " + this.lastName;
  }
  // 计算属性
  set name(value) {
    const splitted = value.split(" ");
    this.firstName = splitted[0];
    this.lastName = splitted[1] || "";
  }
}
</script>
6、@Watch

@Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象

{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数,第二个表示监听的属性变化时是否调用回调函数

<template>
  <button v-on:click="hello">Click</button>
</template>

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

@Component({})
export default class HelloWorld extends Vue {
  // 侦听器
  @Watch("message", { immediate: true, deep: true })
  onChangeValue(newVal: string, oldVal: string) {}

  // 定义的变量
  message: string = "Hello World!";

  // 方法
  hello() {
    this.message = "This is an test page!";
  }
}
</script>
7、@Prop

子组件接收父组件传参

@Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型

// 高阶函数接受参数,兼容以下写法

@Prop(String) name!: string | undefined;

@Prop([String, Number]) count!: string | number;

@Prop({type: Number, default: 0, (required、validator)}) age!: number;

@Prop() private name!: string;

//父组件HomeView.vue
<template>
  <div>
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  //组件
  components: {
    HelloWorld,
  },
})
export default class HomeView extends Vue {}
</script>
//子组件HelloWorld.vue
<template>
  <div>
    {{ msg }}
  </div>
</template>

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

@Component({})
export default class HelloWorld extends Vue {
  // 父组件传递的参数
  //这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值
  @Prop({ type: String, default: "" }) msg!: string;
}
</script>

8、@Emit

@Emit会将回调函数的返回值作为第二个参数,如果返回值为一个Promise对象,emit会在Promise-resolved后触发


@Emit(‘del’) private delEmit(e: MouseEvent){}

@Emit()//省略参数将使用回调函数名,转化为中划线@add-data

addData(data: any){return ‘’;}//如果此处不return,则使用函数参数data

//父组件HomeView.vue
<template>
  <div>
    <HelloWorld @editHandleEmit="editHandle" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  //组件
  components: {
    HelloWorld,
  },
})
export default class HomeView extends Vue {
  // 方法
  editHandle(row: any) {
    console.log(row);
  }
}
</script>
//子组件HelloWorld.vue
<template>
  <div>
    <button v-on:click="editHandle">Click</button>
  </div>
</template>

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

@Component({})
export default class HelloWorld extends Vue {
  // 定义的变量
  count: number = 0;
  
  // Emit方法
  @Emit("editHandleEmit")
  private editHandle() {
    return this.count;
  }
}
</script>
9、Mixins

Vue类组件提供了mixins辅助功能,以类样式方式使用mixins。通过使用mixins帮助程序,TypeScript可以推断混合类型并在组件类型上继承它们。

注意:所有mixin必须声明为类组件。

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';

//定义vue/type/vue模块
declare module 'vue/types/vue' {
    interface Vue {
        value: string;
    }
}

@Component
export default class myMixins extends Vue {
    // 定义的变量
    value: string = 'Hello'
}
//页面HelloWorld.vue
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from './mixins';

@Component({
    //混入
    mixins: [myMixins]
})
export default class myComponent extends Vue {
    // 生命周期
    created() {
        console.log(this.value) // => Hello
    }
}

四、总结

  1. methods,钩子都可以直接写作class的方法
  2. computed属性可以直接通过get来获得
  3. 初始化data可以声明为class的属性
  4. 其他的都可以放到Component装饰器里
目录
相关文章
|
7月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
4月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
6月前
|
JavaScript 前端开发 程序员
TypeScript 类
TypeScript 类
|
2月前
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
40 3
|
3月前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
24 0
typeScript进阶(13)_类与注意事项(八项特性)
|
4月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
|
4月前
|
资源调度 JavaScript 前端开发
Vue3+TypeScript前端项目新纪元:揭秘高效事件总线Mitt,轻松驾驭组件间通信的艺术!
【8月更文挑战第3天】Vue3结合TypeScript强化了类型安全与组件化开发。面对大型应用中复杂的组件通信挑战,可通过引入轻量级事件发射器Mitt实现事件总线模式。Mitt易于集成,通过简单几步即可完成安装与配置:安装Mitt、创建事件总线实例、并在组件中使用`emit`与`on`方法发送及监听事件。此外,利用TypeScript的强大类型系统确保事件处理器正确无误。这种方式有助于保持代码整洁、解耦组件,同时提高应用的可维护性和扩展性。不过,在大规模项目中需谨慎使用,以防事件流过于复杂难以管理。
119 1
|
5月前
|
开发框架 监控 JavaScript
基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
|
4月前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
62 0
|
5月前
|
JavaScript 前端开发
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
52 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件