How To Write Class-Based Components with Vue.js and TypeScript

Introduction

Vue.js 2 supports class-style components. If you are coming from an Angular (2+) background, you are probably familiar with the pattern of writing components as classes using properties and decorators to describe more complex parts of your component.

The biggest advantage class-style components have over standard Vue.js components is that they make it clearer where this actually points to in the compiled component, and allow for more concise code.

In this article, you will be introduced to using vue-class-component and vue-property-decorator to support TypeScript in Vue.js class-based components.

Prerequisites

To follow along with this article, you will need:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Some familiarity with setting up a Vue.js project and Single File Components.
• Some familiarity with TypeScript conventions.

This tutorial was verified with Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cli v4.5.0, vue-class-component v7.2.3, and vue-property-decorator v8.4.2.

Step 1 — Setting Up the Project

You will need vue-class-component and vue-property-decorator installed.

You can use @vue/cli to create a new Vue.js project:

npx @vue/cli create vue-typescript-example

For the purposes of this tutorial, the configuration will require:

@vue/-plugin-typescript will install typescript, vue-class-component, and vue-property-decorator.

Then, navigate to the project directory:

cd vue-typescript-example

At this point, you have a Vue.js project set up for TypeScript and class-style components.

Step 2 — Writing a Single-File Component with TypeScript

A class component is a TypeScript class that extends the Vue object. In single-file components, make sure you set the <script> language to ts and export the class as default.

Open App.vue in your code editor and create this example single-file component with TypeScript:

<template>
  <div>
    <label>Update myDataProperty
      <input :value="myDataProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myDataProperty }}</div>
  </div>
</template>

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

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string = 'Data Property'

  // Component method
  updateMyProperty ($event: { target: { value: string } }) {
    this.myDataProperty = $event.target.value
  }
}
</script>

Notice that the data properties are defined directly on the class and methods.

The @Component(componentConfig) decorator is what makes this possible. It transforms the class into a format that Vue.js can understand during the compilation process.

At this point, if you were to compile and observe your application in a browser, you would be presented with an input field and the word Data Property. By interacting with the input field, myDataProperty will be updated and reflect the changes that are made.

Step 3 — Using Component Props

Through the use of the @Prop(config) decorator from vue-property-decorator, you can declare input properties in much the same way as data properties.

Here is an example in TypeScript that takes a exampleProperty a component prop with the default value of 'Input Property':

<template>
  <div>{{ exampleProperty }}</div>
</template>

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

@Component
export default class App extends Vue {
  @Prop({ default: 'Input Property' })
  exampleProperty!: string
}
</script>

In JavaScript, this is equivalent to:

export default {
  props: {
    exampleProperty: {
      type: String,
      default: 'Input Property'
    }
  }
}

At this point, if you were to compile and observe your application in a browser, you would be presented with the message: Input Property.

Step 4 — Using Computed Properties

Computed properties are written as getters and setters on the class.

Here is an example in TypeScript that gets a myComputedProp and returns a random number:

<template>
  <div>{{ myComputedProp }}</div>
</template>

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

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}
</script>

In JavaScript, this is equivalent to:

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

At this point, if you were to compile and observe your application in a browser, you would be presented with a random number.

Step 5 — Using Watchers

Watchers can be created with the @Watch(propertyString, config) decorator.

Here is an example in TypeScript that watches for when myWatchedProperty triggers onPropertyChanged:

<template>
  <div>
    <label>Update myWatchedProperty
      <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myWatchedPropertyStatus }}</div>
  </div>
</template>

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

@Component
export default class App extends Vue {
  myWatchedProperty: string = 'Watched Property'
  myWatchedPropertyStatus: string = ''

  @Watch('myWatchedProperty')
  onPropertyChanged(value: string, oldValue: string) {
    this.myWatchedPropertyStatus = 'Watched Property Changed'
  }

  updateMyProperty ($event: { target: { value: string } }) {
    this.myWatchedProperty = $event.target.value
  }
}
</script>

In JavaScript, this is equivalent to:

export default {
  data() {
    return {
      myWatchedProperty: null
    }
  }

  methods: {
    onPropertyChanged(value, oldValue) {
      // ...
    }
  }

  watch: {
    myWatchedProperty: {
      handler: 'onPropertyChanged',
      immediate: false,
      deep: true
    }
  }
}

At this point, if you were to compile and observe your application in a browser, you would be presented with an input field. Changing the input value will display the message Watched Property Changed.

Conclusion

In this article, you learned how to use vue-class-component and vue-property-decorator to support TypeScript in Vue.js class-based components.

This article introduced @Component, get, and set. For a full list of declarations available from vue-class-component, consult the official documentation.

This article also introduced @Prop, and @Watch. For a full list of decorators available from vue-property-decorator, consult the official documentation.

If you’d like to learn more about TypeScript, check out our TypeScript topic page for exercises and programming projects.