usystems / vuejs-typescript-component

TypeScript decorator to build a vuejs component
MIT License
12 stars 1 forks source link

Decorators to transform a TypeScript class to a Vue component

// load the decorators
/// <reference path="src/vue-component.ts" />
// destruct the decorators from the VueComponent
const {createComponent, prop, lifecycleHook, eventHook} = VueComponent;

// transform the class Demo to a vue component called demo
@createComponent('demo')
// the VueComponent.Base provides all the declarations, Vue provieds to the component, the makes sure
// TypeScript support type checking and autocomplete
class Demo extends VueComponent.Base {

    // transforms to option.template 
    static template:string = '#demo-template';

    // transforms to option.replace
    static replace:boolean = true;

    // the @props decorator transforms a property to an attribute
    // for the supported options see http://vuejs.org/api/options.html#props
    @prop({
        type: Boolean,
        required: true
    })
    option:boolean;

    // normal properties, pass through the data options are declared as normal properties
    property:string = 'foo';

    // the @lifecycleHook decorator supports the following hooks:
    // created, beforeCompile, compiled, ready, attached, detached, beforeDestroy, destroyed
    @lifecycleHook('compiled')
    compiled():void {
        // ...
    }

    // the @eventHook decorator registers the decorated method as event listener 
    @eventHook('listen.to.event')
    eventListenToEvent():boolean {
        // ...
    }

    // normal methods are declared as class members
    method(arg:string):void {
        // ...
    }

    // computed properties are defined as getter and setter
    get computed():number {
        // ...
    }
    set computed(arg:number) {
        // ...
    }
}