Vue Typescript

This package contains a set of decorators allowing you to write your Vue components and directives as TypeScript classes. You can find it in @banquette/vue-typescript.

Introduction

Even if Vue 3 is written in TypeScript, the default way of declaring components doesn't leverage TypeScript's capabilities. Let's take for example this very basic component from the official Vue documentation:

export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++
        }
    },
    mounted() {
        // methods can be called in lifecycle hooks, or other methods!
        this.increment()
    }
}

Even if you wanted, it would be impractical to define a type for count, and the link between the object returned by data() and the way it is used in the increment method is not intuitive and would make no sense to the autocomplete feature of a code editor without a specific support or a plugin.

The goal of vue-typescript is to offer you a real TypeScript class. The previous example could be written like:

import { Component, Expose } from '@banquette/vue-typescript';

@Component()
class Counter {
    @Expose()
    public count: number = 0;
    
    @Expose()
    public increment(): void {
        this.count++;
    }
}

NOTE

There is no trick, the object is a normal TypeScript class. You can inherit from another class, or use it as a base class for another component if you want.