Typescript Pattern for Vue Components

in.ts

module MyModule {
    export class MyClass extends Vue {

        // define instance methods
        myMethod() {
            // the TS-Type of "this" is defined as Instance of MyClass
            console.log("myMethod");
        }
        myOtherMethod() {
            console.log("myOtherMethod");
        }

        // AVOID: the following method is unreachable, but is showing up in intellisense
        unreachableMethod = function () {
            console.log("hugh?");
        }

        /// the TS statics of class act as "extend options" in Vue
        /// "private" makes them invisible for intellisense

        // collect all the instance methods
        private static methods: any = {
            myMethod: MyClass.prototype.myMethod,
            myOtherMethod: MyClass.prototype.myOtherMethod,
            // unreachableMethod:MyClass.prototype.unreachableMethod // is undefined
            // unreachableMethod:new MyClass().unreachableMethod // is not very pleasing
        }

        // use of static property
        private static template: string = "myTemplate!";

        // use of static function
        private static ready = function () {
            // TS-Type of "this" is undefined

            // use a custom var (e.g. "self") with a TS-Type-Definition ...
            var self: MyClass = this;
            this.myMethod();

            // ...or a TS-Typecast...
            (<MyClass>this).myMethod();
            
            // ...or wait until TS allows us to define "this" in functions... 

            // ...to declare the TS-Type of "this" as Instance of MyClass
        }

        // a true static function of MyClass visible for intellisense
        static myStaticFn() {
            // "this" is declared as MyClass
        }
    }

    // HACK: use the statics of myClass and override the TS constructor 
    MyModule['MyClass'] = Vue.extend(MyClass);

}

//create and use your Vue-Component as normal
var myClass = new MyModule.MyClass({
    el: "#myContainer",
    ready: function () {
        this.myOtherMethod();
    }
});

out.js

// there is some dead or useless code (e.g. the TS-Extend-Routine and the TS-Constructor of MyClass)

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

var MyModule;
(function (MyModule) {
    var MyClass = (function (_super) {
        __extends(MyClass, _super);
        function MyClass() {
            _super.apply(this, arguments);
            this.unreachableMethod = function () {
                console.log("hugh?");
            };
        }
        MyClass.prototype.myMethod = function () {
            console.log("myMethod");
        };
        MyClass.prototype.myOtherMethod = function () {
            console.log("myOtherMethod");
        };

        MyClass.myStaticFn = function () {
        };
        MyClass.methods = {
            myMethod: MyClass.prototype.myMethod,
            myOtherMethod: MyClass.prototype.myOtherMethod
        };

        MyClass.template = "myTemplate!";

        MyClass.ready = function () {
            var self = this;
            this.myMethod();
            this.myMethod();
        };
        return MyClass;
    })(Vue);
    MyModule.MyClass = MyClass;

    MyModule['MyClass'] = Vue.extend(MyClass);
})(MyModule || (MyModule = {}));

var myClass = new MyModule.MyClass({
    el: "#myContainer",
    ready: function () {
        this.myOtherMethod();
    }
});

vue.d.ts

// very basic TS-Definitions for Vue; should be improved (and is outdated)

declare class Vue {

    // constructor
    constructor(instanceOpt?);

    // static
    static cid: number;
    static compiler: any;
    static component: (id, definition) => any;
    static config: {
        async: boolean;
        debug: boolean;
        delimiters: string;
        interpolate: boolean;
        prefix: string;
        proto: boolean;
        silent: boolean;
    };
    static directive: (id, definition) => any;
    static extend: (extendOptions) => any;
    static filter: (id, definition) => any;
    static nextTick: (cb, ctx) => any;
    static options: {
        components: any;
        directives: {
            Objectattr: any;
            class: (value) => any;
            cloak: any;
            component: any;
            el: any;
            events: any;
            html: any;
            if: any;
            model: any;
            on: any;
            partial: any;
            ref: any;
            repeat: any;
            show: (value) => any;
            style: any;
            text: any;
            transition: any;
            with: any;
        };
        filters: {
            capitalize: (value) => any;
            currency: (value, sign) => any;
            filterBy: (arr, searchKey, delimiter, dataKey) => any;
            json: any;
            key: (handler, key) => any;
            lowercase: (value) => any;
            orderBy: (arr, sortKey, reverseKey) => any;
            pluralize: (value) => any;
            uppercase: (value) => any;
            partials: any;
        };
        transitions: any;
    };
    static parsers: any;
    static partial: (id, definition) => any;
    static transition: (id, definition) => any;
    static use: (plugin) => any;
    static util: {
        Vue: Vue;
        addClass: (el, cls) => any;
        after: (el, target) => any;
        animationEndEvent: string;
        animationProp: string;
        applyFilters: (value, filters, vm, oldVal) => any;
        assertAsset: (val, type, id) => any;
        attr: (node, attr) => any;
        before: (el, target) => any;
        bind: (fn, ctx) => any;
        camelize: (str, cap) => any;
        copyAttributes: (from, to) => any;
        define: (obj, key, val, enumerable) => any;
        extend: (to, from) => any;
        extractContent: (el) => any;
        hasProto: boolean;
        inBrowser: boolean;
        inDoc: (node) => any;
        isArray: (obj) => any;
        isIE9: boolean;
        isObject: (obj) => any;
        isPlainObject: (obj) => any;
        isReserved: (str) => any;
        log: (msg) => any;
        nextTick: (cb, ctx) => any;
        off: (el, event, cb) => any;
        on: (el, event, cb) => any;
        prepend: (el, target) => any;
        remove: (el) => any;
        removeClass: (el, cls) => any;
        replace: (target, el) => any;
        resolveFilters: (vm, filters, target) => any;
        stripQuotes: (str) => any;
        toArray: (list, start) => any;
        toNumber: (value) => any;
        toString: (value) => any;
        transitionEndEvent: string;
        transitionProp: string;
        warn: (msg) => any;
    };

    // public properties
    public $: any;
    public $$: any;
    public $data: any;
    public $el: any;
    public $options: any;
    public $parent: any;
    public $root: any;

    // public methods
    public $add: (key, val) => any;
    public $addChild: (opts, BaseCtor) => any;
    public $after: (target, cb, withTransition) => any;
    public $appendTo: (target, cb, withTransition) => any;
    public $before: (target, cb, withTransition) => any;
    public $broadcast: (event) => any;
    public $compile: (el) => any;
    public $delete: (key) => any;
    public $destroy: (remove, deferCleanup) => any;
    public $dispatch: () => any;
    public $emit: (event) => any;
    public $eval: (text) => any;
    public $get: (exp) => any;
    public $interpolate: (text) => any;
    public $log: (path) => any;
    public $mount: (el) => any;
    public $off: (event, fn) => any;
    public $on: (event, fn) => any;
    public $once: (event, fn) => any;
    public $prependTo: (target, cb, withTransition) => any;
    public $remove: (cb, withTransition) => any;
    public $set: (exp, val) => any;
    public $watch: (exp: string, cb: (val: any, old?: any) => any, deep?: boolean, immediate?: boolean) => any;
}