How to apply TypeScript classes in Vue projects

This article is about how to use the TypeScript class in a Vue project. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. Preface

TypeScript is based on the vue-class-component library, a library officially launched by vue that supports the development of vue single-file components using class.

The main functions are as follows:

Methods can be directly declared as a member method of a class

A calculated property can be declared as a property accessor for a class

The initialized data can be declared as a class attribute

Data, render, and all Vue lifecycle hooks can be used directly as member methods of a class

All other attributes need to be placed in the decorator

2. Use

Vue-property-decorator mainly provides the following decorators

@ Prop

@ PropSync

@ Model

@ Watch

@ Provide

@ Inject

@ ProvideReactive

@ InjectReactive

@ Emit

@ Ref

@ Component (provided by vue-class-component)

Mixins (provided by vue-class-component)

1.@Component

Component decorator it indicates that this class is a Vue component, so it cannot be omitted even if the option is not set

If you need to define such as name, components, filters, directives, and custom properties, you can define them in the Component decorator as follows:

Import {Component,Vue} from 'vue-property-decorator'; import {componentA,componentB} from' @ / components' @ Component ({components: {componentA, componentB,}, directives: {focus: {/ / definition of instruction inserted: function (el) {el.focus ()}) export default class YourCompoent extends Vue {} 2.compued, data, methods

Here, the data and methods properties of the component are cancelled. In the past, the properties in the object returned by data and the methods in methods need to be directly defined in Class as the properties and methods of the class.

@ Component export default class HelloDecorator extends Vue {count: number = 123 / / the class attribute is equivalent to the previous data add (): the number {/ / class method is the previous method this.count + 1} / / get the calculation property get total (): number {return this.count + 1} / / set the calculation property set total (param:number): void { This.count = param}} 3.@props

Component to receive properties, used as follows:

Import {Component,Vue,Prop} from vue-property-decorator; @ Component export default class YourComponent extends Vue {@ Prop (String) propA:string; @ Prop ([String,Number]) propB:string | number; @ Prop ({type: String, / / type: [String,Number] default: 'default value', / / is usually String or Number / / if it is an object or array. The default value returns / / defatult from a factory function: () = > {/ / return ['axiomagem'] / /} required: true, validator: (value) = > {return ['InProcess',' Settled'] .indexOf (value)! =-1}}) propC:string;} 4.@watch

It is actually a listener in Vue, as follows:

Import {Vue, Component, Watch} from 'vue-property-decorator' @ Component export default class YourComponent extends Vue {@ Watch (' child') onChildChanged (val: string, oldVal: string) {} @ Watch ('person', {immediate: true, deep: true}) onPersonChanged1 (val: Person, oldVal: Person) {} @ Watch (' person') onPersonChanged2 (val: Person, oldVal: Person) {} 5.@emit

The @ Emit decorator provided by vue-property-decorator replaces the event trigger $emit in Vue, as follows:

Import {Vue, Component, Emit} from 'vue-property-decorator'; @ Component ({}) export default class Some extends Vue {mounted () {this.$on (' emit-todo', function (n) {console.log (n)}) this.emitTodo ('world') } @ Emit () emitTodo (n: string) {console.log ('hello');}} Thank you for reading! This is the end of this article on "how to apply TypeScript classes in Vue projects". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!