Migrate to TypeScript (#25)

* migrate to ts

* more concrete type annoation

* rewrite test code in TS

* add circle ci config to use latest node version

* update readme for more detailed requirement

* update example code to ts

Author: ktsn

.gitignore

@@ -2,3 +2,6 @@ node_modules
 example/build.js
 example/build.js.map
 test/test.build.js
+
+/index.js
+/index.d.ts

README.md

@@ -4,7 +4,9 @@
 
 ### Usage
 
-**Required**: Babel with stage 1 transforms, or TypeScript 1.5+ (for [decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md)).
+**Required**: [ECMAScript stage 1 decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md).  
+If you use Babel, [babel-plugin-transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy) is needed.  
+If you use TypeScript, enable `--experimentalDecorators` flag.  
 
 Note:
 
@@ -61,7 +63,7 @@ class App {
 ### Build the Example
 
 ``` bash
-$ npm install && npm run build
+$ npm install && npm run example
 ```
 
 ### License

circle.yml

@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 6

example/example.js renamed to example/example.ts

@@ -1,11 +1,15 @@
-import Component from '../'
+import * as Vue from 'vue'
+import Component from '../index'
 
 @Component({
   props: {
     propMessage: String
   }
 })
-class App {
+class App extends Vue {
+  propMessage: string
+  msg: number
+
   // return initial data
   data () {
     return {
@@ -28,13 +32,13 @@ class App {
     alert('greeting: ' + this.msg)
   }
 
-  render (h) {
+  render (h: Vue.CreateElement) {
     return (
       h('div', [
         h('input', {
           domProps: { value: this.msg },
           on: {
-            input: (event) => {
+            input: (event: any) => {
               this.msg = event.target.value
             }
           }

example/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "isolatedModules": false,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "include": [
+    "./**/*.ts"
+  ],
+  "compileOnSave": false
+}

example/webpack.config.js

@@ -1,15 +1,15 @@
 module.exports = {
-  entry: './example/example.js',
+  entry: './example/example.ts',
   output: {
     path: './example',
     filename: 'build.js'
   },
   module: {
     loaders: [
       {
-        test: /\.js$/,
+        test: /\.ts$/,
         exclude: /node_modules|vue\/src/,
-        loader: 'babel?stage=0'
+        loader: 'ts'
       }
     ]
   },

index.d.ts

@@ -1,10 +1,6 @@
-Object.defineProperty(exports, '__esModule', {
-  value: true
-})
+import * as Vue from 'vue'
 
-var Vue = require('vue')
-
-var internalHooks = [
+const internalHooks = [
   'data',
   'beforeCreate',
   'created',
@@ -19,13 +15,15 @@ var internalHooks = [
   'render'
 ]
 
-function componentFactory (Component, options) {
-  if (!options) {
-    options = {}
-  }
-  options.name = options.name || Component.name
+export type VueClass = { new (): Vue } & typeof Vue
+
+function componentFactory (
+  Component: VueClass, 
+  options: Vue.ComponentOptions<any> = {}
+): VueClass {
+  options.name = options.name || (Component as any)._componentTag
   // prototype props.
-  var proto = Component.prototype
+  const proto = Component.prototype
   Object.getOwnPropertyNames(proto).forEach(function (key) {
     if (key === 'constructor') {
       return
@@ -35,7 +33,7 @@ function componentFactory (Component, options) {
       options[key] = proto[key]
       return
     }
-    var descriptor = Object.getOwnPropertyDescriptor(proto, key)
+    const descriptor = Object.getOwnPropertyDescriptor(proto, key)
     if (typeof descriptor.value === 'function') {
       // methods
       (options.methods || (options.methods = {}))[key] = descriptor.value
@@ -48,20 +46,21 @@ function componentFactory (Component, options) {
     }
   })
   // find super
-  var superProto = Object.getPrototypeOf(Component.prototype)
-  var Super = superProto instanceof Vue
-    ? superProto.constructor
+  const superProto = Object.getPrototypeOf(Component.prototype)
+  const Super: VueClass = superProto instanceof Vue
+    ? superProto.constructor as VueClass
     : Vue
   return Super.extend(options)
 }
 
-function decorator (options) {
+export default function decorator (options: Vue.ComponentOptions<any>): <V extends VueClass>(target: V) => V
+export default function decorator <V extends VueClass>(target: V): V
+export default function decorator <V extends VueClass>(options: Vue.ComponentOptions<any> | V): any {
   if (typeof options === 'function') {
     return componentFactory(options)
   }
-  return function (Component) {
+  return function (Component: any) {
     return componentFactory(Component, options)
   }
 }
 
-exports.default = decorator

index.js renamed to index.ts

@@ -10,9 +10,10 @@
     "tsconfig.json"
   ],
   "scripts": {
-    "build": "webpack --config example/webpack.config.js",
+    "build": "tsc -p .",
+    "example": "npm run build && webpack --config example/webpack.config.js",
     "dev": "webpack --config example/webpack.config.js --watch",
-    "test": "webpack --config test/webpack.config.js && mocha test/test.build.js"
+    "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js"
   },
   "repository": {
     "type": "git",
@@ -31,12 +32,14 @@
   },
   "homepage": "https://github.com/vuejs/vue-classy#readme",
   "devDependencies": {
-    "babel-core": "^5.8.0",
-    "babel-loader": "^5.3.3",
+    "@types/chai": "^3.4.34",
+    "@types/mocha": "^2.2.32",
     "chai": "^3.5.0",
-    "mocha": "^2.4.5",
+    "mocha": "^3.1.2",
     "node-libs-browser": "^1.0.0",
-    "vue": "^2.0.0-rc.7",
-    "webpack": "^1.12.12"
+    "ts-loader": "^0.9.5",
+    "typescript": "^2.0.6",
+    "vue": "^2.0.3",
+    "webpack": "^2.1.0-beta.25"
   }
 }

package.json

@@ -1,6 +1,6 @@
 import Component from '../index'
 import { expect } from 'chai'
-import Vue from 'vue'
+import * as Vue from 'vue'
 
 describe('vue-class-component', () => {
 
@@ -9,7 +9,7 @@ describe('vue-class-component', () => {
     let destroyed = false
 
     @Component
-    class MyComp {
+    class MyComp extends Vue {
       created () {
         created = true
       }
@@ -26,10 +26,10 @@ describe('vue-class-component', () => {
   })
 
   it('methods', () => {
-    let msg
+    let msg: string = ''
 
     @Component
-    class MyComp {
+    class MyComp extends Vue {
       hello () {
         msg = 'hi'
       }
@@ -42,7 +42,8 @@ describe('vue-class-component', () => {
 
   it('computed', () => {
     @Component
-    class MyComp {
+    class MyComp extends Vue {
+      a: number
       data () {
         return {
           a: 1
@@ -61,14 +62,15 @@ describe('vue-class-component', () => {
   })
 
   it('other options', (done) => {
-    let v
+    let v: number
 
     @Component({
       watch: {
         a: val => v = val
       }
     })
-    class MyComp {
+    class MyComp extends Vue {
+      a: number
       data () {
         return { a: 1 }
       }
@@ -84,15 +86,17 @@ describe('vue-class-component', () => {
 
   it('extending', function () {
     @Component
-    class Base {
-      data () {
+    class Base extends Vue {
+      a: number
+      data (): any {
         return { a: 1 }
       }
     }
 
     @Component
     class A extends Base {
-      data () {
+      b: number
+      data (): any {
         return { b: 2 }
       }
     }