feat(ts): provide type definitions (#4164)

package.json

@@ -15,11 +15,12 @@
     "lint": "eslint --ext .js,.mjs,.vue .",
     "lint:app": "eslint-multiplexer eslint --ignore-path packages/app/template/.eslintignore 'test/fixtures/!(missing-plugin)/.nuxt!(-dev)/**' | eslint-multiplexer -b",
     "nuxt": "node -r esm ./packages/cli/bin/nuxt-cli.js",
-    "test": "yarn test:fixtures && yarn test:unit",
+    "test": "yarn test:fixtures && yarn test:unit && yarn test:types",
     "test:fixtures": "jest test/fixtures",
     "test:e2e": "jest -i test/e2e",
     "test:lint": "yarn lint",
     "test:unit": "jest test/unit",
+    "test:types": "tsc -p test/types",
     "postinstall": "lerna link && yarn dev",
     "release": "lerna version --exact"
   },
@@ -73,6 +74,7 @@
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-replace": "^2.1.0",
     "sort-package-json": "^1.16.0",
+    "typescript": "^3.1.6",
     "vue-jest": "^3.0.0"
   },
   "repository": {

packages/vue-app/package.json

@@ -3,9 +3,11 @@
   "version": "2.3.1",
   "repository": "nuxt/nuxt.js",
   "license": "MIT",
+  "typings": "types/index.d.ts",
   "files": [
     "dist",
-    "template"
+    "template",
+    "types/*.d.ts"
   ],
   "main": "dist/vue-app.js",
   "publishConfig": {

packages/vue-app/types/index.d.ts

@@ -0,0 +1,63 @@
+import Vue from "vue";
+import VueRouter, { Route } from "vue-router";
+import { Store } from "vuex";
+
+// augment typings of Vue.js
+import "./vue";
+
+type Dictionary<T> = { [key: string]: T };
+
+type NuxtState = Dictionary<any>;
+
+export interface Context {
+  app: Vue;
+  isClient: boolean;
+  isServer: boolean;
+  isStatic: boolean;
+  isDev: boolean;
+  isHMR: boolean;
+  route: Route;
+  store: Store<any>;
+  env: Dictionary<any>;
+  params: Route['params'];
+  query: Route['query'];
+  req: Request;
+  res: Response;
+  redirect(status: number, path: string, query?: Route['query']): void;
+  redirect(path: string, query?: Route['query']): void;
+  error(params: ErrorParams): void;
+  nuxtState: NuxtState;
+  beforeNuxtRender(fn: (params: { Components: VueRouter['getMatchedComponents'], nuxtState: NuxtState }) => void): void
+}
+
+export interface Transition {
+  name?: string;
+  mode?: string;
+  css?: boolean;
+  duration?: number;
+  type?: string;
+  enterClass?: string;
+  enterToClass?: string;
+  enterActiveClass?: string;
+  leaveClass?: string;
+  leaveToClass?: string;
+  leaveActiveClass?: string;
+  beforeEnter?(el: HTMLElement): void;
+  enter?(el: HTMLElement, done: Function): void;
+  afterEnter?(el: HTMLElement): void;
+  enterCancelled?(el: HTMLElement): void;
+  beforeLeave?(el: HTMLElement): void;
+  leave?(el: HTMLElement, done: Function): void;
+  afterLeave?(el: HTMLElement): void;
+  leaveCancelled?(el: HTMLElement): void;
+}
+
+export interface ErrorParams {
+  statusCode?: number;
+  message?: string;
+}
+
+export interface LoadingObject {
+  start(): void;
+  finish(): void;
+}

packages/vue-app/types/vue.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Extends interfaces in Vue.js
+ */
+
+import Vue, { ComponentOptions } from "vue";
+import { Route } from "vue-router";
+import { MetaInfo } from "vue-meta";
+import { Context, Transition, LoadingObject } from "./index";
+
+declare module "vue/types/options" {
+  interface ComponentOptions<V extends Vue> {
+    asyncData?(ctx: Context): object | undefined;
+    fetch?(ctx: Context): Promise<void> | void;
+    head?: MetaInfo | (() => MetaInfo);
+    key?: string | ((to: Route) => string);
+    layout?: string | ((ctx: Context) => string);
+    middleware?: string | string[];
+    scrollToTop?: boolean;
+    transition?: string | Transition | ((to: Route, from: Route) => string);
+    validate?(ctx: Context): Promise<boolean> | boolean;
+    watchQuery?: boolean | string[];
+  }
+}
+
+declare module "vue/types/vue" {
+  interface Vue {
+    $nuxt: {
+      $loading: LoadingObject;
+    };
+  }
+}

test/types/index.ts

@@ -0,0 +1,81 @@
+import Vue, { ComponentOptions } from 'vue'
+import * as types from '@nuxt/vue-app'
+
+const options: ComponentOptions<Vue> = {}
+
+// asyncData
+
+options.asyncData = (context) => {
+  return {
+    foo: 'bar'
+  }
+}
+
+options.asyncData = () => undefined
+
+// fetch
+
+options.fetch = ({ store }) => {
+  return Promise.resolve('bar').then(res => {
+    store.commit('setFoo', res)
+  })
+}
+
+options.fetch = async ({ store }) => {
+  let res = await Promise.resolve('bar')
+  store.commit('setFoo', res)
+}
+
+// key
+
+options.key = 'foo'
+options.key = (to) => to.fullPath
+
+// head
+
+const metaInfo = {
+  title: 'Home',
+  meta: [
+    { hid: 'description', name: 'description', content: 'My custom description' }
+  ]
+}
+
+options.head = metaInfo
+options.head = () => metaInfo
+
+// layout
+
+options.layout = 'foo'
+options.layout = (context) => 'foo'
+
+// middleware
+
+options.middleware = 'foo'
+options.middleware = ['foo', 'bar']
+
+// scrollToTop
+
+options.scrollToTop = true
+
+// transition
+
+options.transition = 'foo'
+options.transition = { name: 'foo' }
+options.transition = (to, from) => 'foo'
+
+// validate
+
+options.validate = (context) => true
+options.validate = async (context) => true
+
+// watchQuery
+
+options.watchQuery = true
+options.watchQuery = ['foo', 'bar']
+
+// $nuxt
+
+const vm = new Vue(options)
+
+vm.$nuxt.$loading.start()
+vm.$nuxt.$loading.finish()

test/types/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "strict": true,
+    "noEmit": true,
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.promise",
+      "es2015.core"
+    ]
+  }
+}