package.json

@@ -24,7 +24,7 @@
   "bugs": "https://github.com/vuejs/vue/issues",
   "homepage": "http://vuejs.org",
   "scripts": {
-    "test": "npm run lint && npm run cover && npm run build && npm run e2e",
+    "test": "npm run lint && npm run cover && npm run build && npm run e2e && npm run types",
     "build": "node build/build.js",
     "install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
     "dev": "webpack --watch --config build/webpack.dev.config.js & npm run serve-test",
@@ -34,6 +34,7 @@
     "e2e": "casperjs test --concise ./test/e2e",
     "unit": "karma start build/karma.unit.config.js",
     "cover": "karma start build/karma.cover.config.js",
+    "types": "tsc -p ./types/test/tsconfig.json",
     "sauce": "karma start build/karma.sauce.config.js",
     "sauce-all": "npm run sauce && npm run sauce -- 1 && npm run sauce -- 2",
     "release": "bash build/release.sh",
@@ -74,6 +75,7 @@
     "rollup": "^0.34.13",
     "rollup-plugin-babel": "^1.0.0",
     "rollup-plugin-replace": "^1.1.0",
+    "typescript": "^2.1.5",
     "uglify-js": "^2.4.24",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.1"

types/index.d.ts

@@ -0,0 +1,51 @@
+import * as V from './vue';
+import * as Options from './options';
+import * as Plugin from './plugin';
+
+declare global {
+  interface Array<T> {
+    $remove(item: T): Array<T>;
+    $set(index: any, val: T): T;
+  }
+
+  // For the projects/tools that depend on this namespace
+  namespace vuejs {
+    export type PropOption = Options.PropOptions;
+    export type ComputedOption = Options.ComputedOptions<any>;
+    export type WatchOption = Options.WatchOptions;
+    export type DirectiveOption = Options.DirectiveOptions<Vue>;
+    export type Directive = Options.DirectiveInstance<Vue>;
+    export type TransitionOpsion = Options.TransitionOptions;
+    export type ComponentOption = Options.ComponentOptions<any>;
+    export type FilterOption = Options.FilterOptions;
+    export type Vue = V.Vue;
+    export type VueStatic = typeof V.Vue;
+    export type VueConfig = typeof V.Vue.config;
+  }
+}
+
+// `Vue` in `export = Vue` must be a namespace
+// All available types are exported via this namespace
+declare namespace Vue {
+
+  export type Component = Options.Component;
+  export type AsyncComponent = Options.AsyncComponent;
+  export type ComponentOptions<V extends Vue> = Options.ComponentOptions<V>;
+  export type PropOptions = Options.PropOptions;
+  export type ComputedOptions<V extends Vue> = Options.ComputedOptions<V>;
+  export type WatchHandler<V extends Vue> = Options.WatchHandler<V>;
+  export type WatchOptions = Options.WatchOptions;
+  export type DirectiveInstance<V extends Vue> = Options.DirectiveInstance<V>;
+  export type DirectiveFunction<V extends Vue> = Options.DirectiveFunction<V>;
+  export type DirectiveOptions<V extends Vue> = Options.DirectiveOptions<V>;
+  export type FilterOptions = Options.FilterOptions;
+  export type TransitionOpsions = Options.TransitionOptions;
+
+  export type PluginFunction<T> = Plugin.PluginFunction<T>;
+  export type PluginObject<T> = Plugin.PluginObject<T>;
+}
+
+// TS cannot merge imported class with namespace, declare a subclass to bypass
+declare class Vue extends V.Vue { }
+
+export = Vue;

types/options.d.ts

@@ -0,0 +1,120 @@
+import { Vue } from './vue';
+
+type Constructor = {
+  new (...args: any[]): any;
+};
+
+type Dictionary<T> = {
+  [key: string]: T;
+};
+
+export type Component = ComponentOptions<Vue> | typeof Vue;
+export type AsyncComponent = (
+  resolve: (component: Component) => void,
+  reject: (reason?: any) => void
+) => Promise<Component> | Component | void;
+
+export interface ComponentOptions<V extends Vue> {
+  data?: Dictionary<any> | ((this: V) => Dictionary<any>);
+  props?: string[] | Dictionary<PropOptions | Constructor | Constructor[]>;
+  propsData?: Dictionary<any>;
+  computed?: Dictionary<((this: V) => any) | ComputedOptions<V>>;
+  methods?: Dictionary<(this: V, ...args: any[]) => any>;
+  watch?: Dictionary<({ handler: WatchHandler<V> } & WatchOptions) | WatchHandler<V> | string>;
+
+  el?: string | HTMLElement | (() => HTMLElement);
+  template?: string;
+  replace?: boolean;
+
+  init?(this: V): void;
+  created?(this: V): void;
+  beforeCompile?(this: V): void;
+  compiled?(this: V): void;
+  activate?(this: V, done: () => void): void;
+  ready?(this: V): void;
+  attached?(this: V): void;
+  detached?(this: V): void;
+  beforeDestroy?(this: V): void;
+  destroyed?(this: V): void;
+
+  directives?: Dictionary<DirectiveOptions<V> | DirectiveFunction<V>>;
+  elementDirectives?: Dictionary<DirectiveOptions<V> | Function>;
+  filters?: Dictionary<Function | FilterOptions>;
+  components?: Dictionary<Component | AsyncComponent>;
+  transitions?: Dictionary<TransitionOptions>;
+  partials?: Dictionary<string>;
+
+  parent?: Vue;
+  events?: Dictionary<((...args: any[]) => (boolean | void)) | string>;
+  mixins?: (ComponentOptions<Vue> | typeof Vue)[];
+  name?: string;
+}
+
+export interface PropOptions {
+  type?: Constructor | Constructor[] | null;
+  required?: boolean;
+  default?: any;
+  twoWay?: boolean;
+  validator?(value: any): boolean;
+  coerce?(value: any): any;
+}
+
+export interface ComputedOptions<V extends Vue> {
+  get?(this: V): any;
+  set(this: V, value: any): void;
+}
+
+export type WatchHandler<V> = (this: V, val: any, oldVal: any) => void;
+
+export interface WatchOptions {
+  deep?: boolean;
+  immediate?: boolean;
+}
+
+export interface DirectiveInstance<V extends Vue> {
+  el: HTMLElement;
+  vm: V;
+  expression: string;
+  arg?: string;
+  name: string;
+  modifiers: Dictionary<boolean>;
+  descriptor: any;
+  params?: Dictionary<any>;
+}
+
+export type DirectiveFunction<V extends Vue> = (this: DirectiveInstance<V>, newVal: any, oldVal: any) => void;
+
+export interface DirectiveOptions<V extends Vue> {
+  bind?(this: DirectiveInstance<V>): void;
+  update?(this: DirectiveInstance<V>, newVal: any, oldVal: any): void;
+  unbind?(this: DirectiveInstance<V>): void;
+  params?: string[];
+  deep?: boolean;
+  twoWay?: boolean;
+  acceptStatement?: boolean;
+  terminal?: boolean;
+  priority?: number;
+}
+
+export interface FilterOptions {
+  read?: Function;
+  write?: Function;
+}
+
+export interface TransitionOptions {
+  css?: boolean;
+  animation?: string;
+  enterClass?: string;
+  leaveClass?: string;
+  beforeEnter?(el: HTMLElement): void;
+  enter?(el: HTMLElement, done: () => void): void;
+  afterEnter?(el: HTMLElement): void;
+  enterCancelled?(el: HTMLElement): void;
+  beforeLeave?(el: HTMLElement): void;
+  leave?(el: HTMLElement, done: () => void): void;
+  afterLeave?(el: HTMLElement): void;
+  leaveCancelled?(el: HTMLElement): void;
+  stagger?(index: number): number;
+  enterStagger?(index: number): number;
+  leaveStagger?(index: number): number;
+}

types/plugin.d.ts

@@ -0,0 +1,10 @@
+import { Vue as _Vue } from './vue';
+
+export type PluginFunction<T> = (Vue: typeof _Vue, options?: T) => void;
+
+export interface PluginObject<T> {
+  install: PluginFunction<T>;
+  [key: string]: any;
+}
+
+export type Plugin<T> = PluginFunction<T> | PluginObject<T>;

types/test/augmentation-test.ts

@@ -0,0 +1,35 @@
+import Vue = require("../index");
+
+declare module "../vue" {
+  // add instance property and method
+  interface Vue {
+    $instanceProperty: string;
+    $instanceMethod(): void;
+  }
+
+  // add static property and method
+  namespace Vue {
+    const staticProperty: string;
+    function staticMethod(): void;
+  }
+}
+
+// augment ComponentOptions
+declare module "../options" {
+  interface ComponentOptions<V extends Vue> {
+    foo?: string;
+  }
+}
+
+const vm = new Vue({
+  data: {
+    a: true
+  },
+  foo: "foo"
+});
+
+vm.$instanceProperty;
+vm.$instanceMethod();
+
+Vue.staticProperty;
+Vue.staticMethod();

types/test/global-test.ts

@@ -0,0 +1,17 @@
+declare var Vue: vuejs.VueStatic;
+
+var app = new Vue({
+  data: {
+    message: ""
+  }
+});
+
+app.$mount("#app");
+
+class Application extends Vue {}
+
+Vue.component("component", {
+  ready () {
+    this.a
+  }
+} as vuejs.ComponentOption)

types/test/options-test.ts

@@ -0,0 +1,118 @@
+import Vue = require("../index");
+import { ComponentOptions } from "../index";
+
+interface Component extends Vue {
+  a: number;
+}
+
+Vue.component('component', {
+  data() {
+    this.$mount
+    this.a
+    return {
+      a: 1
+    }
+  },
+  props: {
+    size: Number,
+    name: {
+      type: String,
+      default: 0,
+      required: true,
+      validator(value) {
+        return value > 0;
+      }
+    }
+  },
+  propsData: {
+    msg: "Hello"
+  },
+  computed: {
+    aDouble(this: Component) {
+      return this.a * 2;
+    },
+    aPlus: {
+      get(this: Component) {
+        return this.a + 1;
+      },
+      set(this: Component, v: number) {
+        this.a = v - 1;
+      },
+      cache: false
+    }
+  },
+  methods: {
+    plus() {
+      this.a++;
+    }
+  },
+  watch: {
+    'a': function(val: number, oldVal: number) {
+      console.log(`new: ${val}, old: ${oldVal}`);
+    },
+    'b': 'someMethod',
+    'c': {
+      handler(val, oldVal) {
+        this.a = val
+      },
+      deep: true
+    }
+  },
+  el: "#app",
+  template: "<div>{{ message }}</div>",
+
+  beforeCreate() {
+    this.a = 1;
+  },
+  created() {},
+  beforeDestroy() {},
+  destroyed() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+
+  directives: {
+    a: {
+      bind() {},
+      inserted() {},
+      update() {},
+      componentMounted() {},
+      unbind() {}
+    },
+    b(val, newVal) {
+      this.el.textContent;
+
+      this.name;
+      this.expression;
+      this.arg;
+      this.modifiers["modifier"];
+    }
+  },
+  components: {
+    a: Vue.component(""),
+    b: {} as ComponentOptions<Vue>
+  },
+  transitions: {},
+  filters: {
+    double(value: number) {
+      return value * 2;
+    }
+  },
+  parent: new Vue,
+  mixins: [Vue.component(""), ({} as ComponentOptions<Vue>)],
+  name: "Component",
+  extends: {} as ComponentOptions<Vue>,
+  delimiters: ["${", "}"]
+} as ComponentOptions<Component>);
+
+Vue.component("async-component", (resolve, reject) => {
+  setTimeout(() => {
+    resolve(Vue.component("component"));
+  }, 0);
+  return new Promise((resolve) => {
+    resolve({ } as ComponentOptions<Vue>);
+  })
+});