Skip to content

Instantly share code, notes, and snippets.

@indus
Last active March 4, 2021 19:12
Show Gist options
  • Save indus/0c1ff6b4f4102a6286a8 to your computer and use it in GitHub Desktop.
Save indus/0c1ff6b4f4102a6286a8 to your computer and use it in GitHub Desktop.
Typescript Pattern for Vue Components
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();
}
});
// 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();
}
});
// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment