feat: adapt to the new vue typings (#132)

Author: ktsn

example/tsconfig.json

@@ -7,14 +7,10 @@
     ],
     "module": "commonjs",
     "moduleResolution": "node",
-    "isolatedModules": false,
     "experimentalDecorators": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
-    "removeComments": true,
+    "strict": true,
     "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true
+    "removeComments": true
   },
   "include": [
     "./**/*.ts"

package.json

@@ -52,9 +52,9 @@
     "ts-loader": "^2.2.1",
     "typescript": "^2.5.2",
     "uglify-js": "^3.0.22",
-    "vue": "^2.3.4",
+    "vue": "github:vuejs/vue#dev",
     "vue-loader": "^13.0.0",
-    "vue-template-compiler": "^2.3.4",
+    "vue-template-compiler": "^2.4.4",
     "webpack": "^3.0.0"
   }
 }

src/component.ts

@@ -18,9 +18,9 @@ export const $internalHooks = [
 ]
 
 export function componentFactory (
-  Component: VueClass,
-  options: ComponentOptions<any> = {}
-): VueClass {
+  Component: VueClass<Vue>,
+  options: ComponentOptions<any, any, any, any> = {}
+): VueClass<Vue> {
   options.name = options.name || (Component as any)._componentTag || (Component as any).name
   // prototype props.
   const proto = Component.prototype
@@ -62,7 +62,7 @@ export function componentFactory (
   // find super
   const superProto = Object.getPrototypeOf(Component.prototype)
   const Super = superProto instanceof Vue
-    ? superProto.constructor as VueClass
+    ? superProto.constructor as VueClass<Vue>
     : Vue
   return Super.extend(options)
 }

src/data.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { VueClass } from './declarations'
 import { noop, warn } from './util'
 
-export function collectDataFromConstructor (vm: Vue, Component: VueClass) {
+export function collectDataFromConstructor (vm: Vue, Component: VueClass<Vue>) {
   // override _init to prevent to init as Vue instance
   Component.prototype._init = function (this: Vue) {
     // proxy to actual vm

src/declarations.ts

@@ -1,10 +1,10 @@
-import Vue from 'vue'
+import Vue, { ComponentOptions } from 'vue'
 
-export type VueClass = { new (): Vue } & typeof Vue
+export type VueClass<V extends Vue> = { new (...args: any[]): V } & typeof Vue
 
-export type DecoratedClass = VueClass & {
+export type DecoratedClass = VueClass<Vue> & {
   // Property, method and parameter decorators created by `createDecorator` helper
   // will enqueue functions that update component options for lazy processing.
   // They will be executed just before creating component constructor.
-  __decorators__?: ((options: Vue.ComponentOptions<Vue>) => void)[]
+  __decorators__?: ((options: ComponentOptions<any, any, any, any>) => void)[]
 }

src/index.ts

@@ -4,15 +4,13 @@ import { componentFactory, $internalHooks } from './component'
 
 export { createDecorator } from './util'
 
-function Component <U extends Vue>(options: ComponentOptions<U>): <V extends VueClass>(target: V) => V
-function Component <V extends VueClass>(target: V): V
-function Component <V extends VueClass, U extends Vue>(
- options: ComponentOptions<U> | V
-): any {
+function Component <V extends Vue>(options: ComponentOptions<any, any, any, any> & ThisType<V>): <VC extends VueClass<V>>(target: VC) => VC
+function Component <VC extends VueClass<Vue>>(target: VC): VC
+function Component (options: ComponentOptions<any, any, any, any> | VueClass<Vue>): any {
   if (typeof options === 'function') {
     return componentFactory(options)
   }
-  return function (Component: V) {
+  return function (Component: VueClass<Vue>) {
     return componentFactory(Component, options)
   }
 }

src/util.ts

@@ -4,13 +4,13 @@ import { DecoratedClass } from './declarations'
 export const noop = () => {}
 
 export function createDecorator (
-  factory: (options: ComponentOptions<Vue>, key: string) => void
+  factory: (options: ComponentOptions<any, any, any, any>, key: string) => void
 ): (target: Vue, key: string) => void
 export function createDecorator (
-  factory: (options: ComponentOptions<Vue>, key: string, index: number) => void
+  factory: (options: ComponentOptions<any, any, any, any>, key: string, index: number) => void
 ): (target: Vue, key: string, index: number) => void
 export function createDecorator (
-  factory: (options: ComponentOptions<Vue>, key: string, index: number) => void
+  factory: (options: ComponentOptions<any, any, any, any>, key: string, index: number) => void
 ): (target: Vue, key: string, index: any) => void {
   return (target, key, index) => {
     const Ctor = target.constructor as DecoratedClass

test/test.ts

@@ -1,6 +1,6 @@
 import Component, { createDecorator } from '../lib'
 import { expect } from 'chai'
-import Vue from 'vue'
+import Vue, { ComputedOptions } from 'vue'
 
 describe('vue-class-component', () => {
 
@@ -197,7 +197,7 @@ describe('vue-class-component', () => {
     const NoCache = createDecorator((options, key) => {
       // options should have computed and methods etc.
       // that specified by class property accessors and methods
-      const computedOption = options.computed![key] as Vue.ComputedOptions<Vue>
+      const computedOption = options.computed![key] as ComputedOptions<Vue>
       computedOption.cache = false
     })
 

tsconfig.json

@@ -8,15 +8,11 @@
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "lib",
-    "isolatedModules": false,
     "experimentalDecorators": true,
     "declaration": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
-    "removeComments": true,
+    "strict": true,
     "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true
+    "removeComments": true
   },
   "include": [
     "src/**/*.ts"