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

ktsn · yyx990803 · commit 8632bc62ad5c · 2017-10-11T22:21:03.000-04:00
diff --git a/example/tsconfig.json b/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"
diff --git a/package.json b/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"
   }
 }
diff --git a/src/component.ts b/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)
 }
diff --git a/src/data.ts b/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
diff --git a/src/declarations.ts b/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)[]
 }
diff --git a/src/index.ts b/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)
   }
 }
diff --git a/src/util.ts b/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
diff --git a/test/test.ts b/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
     })
 
diff --git a/tsconfig.json b/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"
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -52,9 +52,9 @@`
`52`	`52`	`"ts-loader": "^2.2.1",`
`53`	`53`	`"typescript": "^2.5.2",`
`54`	`54`	`"uglify-js": "^3.0.22",`
`55`		`- "vue": "^2.3.4",`
	`55`	`+ "vue": "github:vuejs/vue#dev",`
`56`	`56`	`"vue-loader": "^13.0.0",`
`57`		`- "vue-template-compiler": "^2.3.4",`
	`57`	`+ "vue-template-compiler": "^2.4.4",`
`58`	`58`	`"webpack": "^3.0.0"`
`59`	`59`	`}`
`60`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,15 +4,13 @@ import { componentFactory, $internalHooks } from './component'`
`4`	`4`
`5`	`5`	`export { createDecorator } from './util'`
`6`	`6`
`7`		`-function Component <U extends Vue>(options: ComponentOptions<U>): <V extends VueClass>(target: V) => V`
`8`		`-function Component <V extends VueClass>(target: V): V`
`9`		`-function Component <V extends VueClass, U extends Vue>(`
`10`		`- options: ComponentOptions<U> \| V`
`11`		`-): any {`
	`7`	`+function Component <V extends Vue>(options: ComponentOptions<any, any, any, any> & ThisType<V>): <VC extends VueClass<V>>(target: VC) => VC`
	`8`	`+function Component <VC extends VueClass<Vue>>(target: VC): VC`
	`9`	`+function Component (options: ComponentOptions<any, any, any, any> \| VueClass<Vue>): any {`
`12`	`10`	`if (typeof options === 'function') {`
`13`	`11`	`return componentFactory(options)`
`14`	`12`	`}`
`15`		`- return function (Component: V) {`
	`13`	`+ return function (Component: VueClass<Vue>) {`
`16`	`14`	`return componentFactory(Component, options)`
`17`	`15`	`}`
`18`	`16`	`}`