Skip to content

Commit 7eef024

Browse files
ktsnyyx990803
ktsn
authored and
yyx990803
committed
Add TypeScript declarations (#681)
* add TypeScript declarations * add config of package.json for typings * fix vue dep
1 parent 0fd6fbf commit 7eef024

File tree

7 files changed

+323
-3
lines changed

7 files changed

+323
-3
lines changed

‎package.json‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,14 @@
55
"author": "Evan You",
66
"license": "MIT",
77
"main": "dist/vue-router.js",
8+
"typings": "types/index.d.ts",
89
"files": [
910
"dist/vue-router.js",
1011
"dist/vue-router.min.js",
11-
"src"
12+
"src",
13+
"types/index.d.ts",
14+
"types/router.d.ts",
15+
"types/vue.d.ts"
1216
],
1317
"keywords": [
1418
"vue",
@@ -20,9 +24,10 @@
2024
"dev:dist": "rollup -wm -c build/rollup.config.js",
2125
"build": "rollup --environment NODE_ENV:production -c build/rollup.config.js && uglifyjs dist/vue-router.js -cm --comments -o dist/vue-router.min.js",
2226
"lint": "eslint src examples",
23-
"test": "npm run lint && flow check && npm run test:unit && npm run test:e2e",
27+
"test": "npm run lint && flow check && npm run test:unit && npm run test:e2e && npm run test:types",
2428
"test:unit": "jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
2529
"test:e2e": "node test/e2e/runner.js",
30+
"test:types": "tsc -p types/test",
2631
"docs": "cd docs && gitbook serve",
2732
"deploy-docs": "bash ./build/update-docs.sh",
2833
"release": "bash build/release.sh"
@@ -60,8 +65,9 @@
6065
"rollup-plugin-replace": "^1.1.1",
6166
"rollup-watch": "^2.4.0",
6267
"selenium-server": "^2.53.1",
68+
"typescript": "^2.0.3",
6369
"uglify-js": "^2.7.0",
64-
"vue": "^2.0.0-rc.6",
70+
"vue": "^2.0.0-rc.7",
6571
"vue-loader": "^9.4.0",
6672
"webpack": "^1.13.1",
6773
"webpack-dev-middleware": "^1.6.1"

‎types/index.d.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import "./vue";
2+
import * as R from "./router";
3+
4+
// `VueRouter` in `export = VueRouter` must be a namespace
5+
// All available types are exported via this namespace
6+
declare namespace VueRouter {
7+
export type RouterMode = R.RouterMode;
8+
export type RawLocation = R.RawLocation;
9+
export type RedirectOption = R.RedirectOption;
10+
export type RouterOptions = R.RouterOptions;
11+
export type RouteConfig = R.RouteConfig;
12+
export type RouteRecord = R.RouteRecord;
13+
export type Location = R.Location;
14+
export type Route = R.Route;
15+
}
16+
17+
// TS cannot merge imported class with namespace, declare a subclass to bypass
18+
declare class VueRouter extends R.VueRouter {}
19+
20+
export = VueRouter;

‎types/router.d.ts‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import Vue = require("vue");
2+
import { ComponentOptions, PluginFunction } from "vue";
3+
4+
type Component = ComponentOptions<Vue> | typeof Vue;
5+
type Dictionary<T> = { [key: string]: T };
6+
7+
export type RouterMode = "hash" | "history" | "abstract";
8+
export type RawLocation = string | Location;
9+
export type RedirectOption = RawLocation | ((to: Route) => RawLocation);
10+
11+
declare class VueRouter {
12+
constructor (options?: RouterOptions);
13+
14+
app: Vue;
15+
mode: RouterMode;
16+
currentRoute: Route;
17+
18+
beforeEach (
19+
guard: (
20+
route: Route,
21+
redirect: (location: RawLocation) => void,
22+
next: () => void
23+
) => any
24+
): void;
25+
afterEach (hook: (route: Route) => any): void;
26+
push (location: RawLocation): void;
27+
replace (location: RawLocation): void;
28+
go (n: number): void;
29+
back (): void;
30+
forward (): void;
31+
getMatchedComponentes (): Component;
32+
33+
static install: PluginFunction<never>;
34+
}
35+
36+
export interface RouterOptions {
37+
routes?: RouteConfig[];
38+
mode?: RouterMode;
39+
base?: string;
40+
linkActiveClass?: string;
41+
scrollBehavior?: (
42+
to: Route,
43+
from: Route,
44+
savedPosition: { x: number, y: number } | undefined
45+
) => { x: number, y: number } | { selector: string } | void;
46+
}
47+
48+
export interface RouteConfig {
49+
path: string;
50+
name?: string;
51+
component?: Component;
52+
components?: Dictionary<Component>;
53+
redirect?: RedirectOption;
54+
alias?: string | string[];
55+
children?: RouteConfig[];
56+
meta?: any;
57+
beforeEnter?: (
58+
route: Route,
59+
redirect: (location: RawLocation) => void,
60+
next: () => void
61+
) => any;
62+
}
63+
64+
export interface RouteRecord {
65+
path: string;
66+
components: Dictionary<Component>;
67+
instances: Dictionary<Vue>;
68+
name?: string;
69+
parent?: RouteRecord;
70+
redirect?: RedirectOption;
71+
matchAs?: string;
72+
meta: any;
73+
beforeEnter?: (
74+
route: Route,
75+
redirect: (location: RawLocation) => void,
76+
next: () => void
77+
) => any;
78+
}
79+
80+
export interface Location {
81+
name?: string;
82+
path?: string;
83+
hash?: string;
84+
query?: Dictionary<string>;
85+
params?: Dictionary<string>;
86+
}
87+
88+
export interface Route {
89+
path: string;
90+
name?: string;
91+
hash: string;
92+
query: Dictionary<string>;
93+
params: Dictionary<string>;
94+
fullPath: string;
95+
matched: RouteRecord[];
96+
redirectedFrom?: string;
97+
meta?: any;
98+
}

‎types/test/index.ts‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import Vue = require("vue");
2+
import { ComponentOptions } from "vue";
3+
4+
import VueRouter = require("../index");
5+
import { Route, RouteRecord, RedirectOption } from "../index";
6+
7+
Vue.use(VueRouter);
8+
9+
const Home = { template: "<div>home</div>" };
10+
const Foo = { template: "<div>foo</div>" };
11+
const Bar = { template: "<div>bar</div>" };
12+
13+
const Hook: ComponentOptions<{ a: string } & Vue> = {
14+
template: "<div>hook</div>",
15+
16+
beforeRouteEnter (route, redirect, next) {
17+
route.params;
18+
redirect("/");
19+
next(vm => {
20+
vm.a = "done";
21+
});
22+
},
23+
24+
beforeRouteLeave (route, redirect, next) {
25+
route.params;
26+
redirect("/");
27+
next();
28+
}
29+
};
30+
31+
const router = new VueRouter({
32+
mode: "history",
33+
base: "/",
34+
linkActiveClass: "active",
35+
scrollBehavior: (to, from, savedPosition) => {
36+
if (from.path === "/") {
37+
return { selector: "#app" };
38+
}
39+
40+
if (to.path === "/child") {
41+
return;
42+
}
43+
44+
if (savedPosition) {
45+
return savedPosition;
46+
}
47+
},
48+
routes: [
49+
{ path: "/", name: "home", component: Home, children: [
50+
{
51+
path: "child",
52+
components: {
53+
default: Foo,
54+
bar: Bar
55+
},
56+
meta: { auth: true },
57+
beforeEnter (route, redirect, next) {
58+
route.params;
59+
redirect({ name: "home" });
60+
next();
61+
}
62+
},
63+
{
64+
path: "children",
65+
redirect: to => {
66+
to.params;
67+
return "/child";
68+
}
69+
}
70+
]},
71+
{ path: "/home", alias: "/" },
72+
{ path: "*", redirect: "/" }
73+
]
74+
});
75+
76+
const App: Vue = router.app;
77+
const mode: string = router.mode;
78+
79+
const route: Route = router.currentRoute;
80+
const path: string = route.path;
81+
const name: string | undefined = route.name;
82+
const hash: string = route.hash;
83+
const query: string = route.query["foo"];
84+
const params: string = route.params["bar"];
85+
const fullPath: string = route.fullPath;
86+
const redirectedFrom: string | undefined = route.redirectedFrom;
87+
const meta: any = route.meta;
88+
const matched: RouteRecord[] = route.matched;
89+
90+
matched.forEach(m => {
91+
const path: string = m.path;
92+
const components: {
93+
[key: string]: ComponentOptions<Vue> | typeof Vue
94+
} = m.components;
95+
const instances: { [key: string]: Vue } = m.instances;
96+
const name: string | undefined = m.name;
97+
const parant: RouteRecord | undefined = m.parent;
98+
const redirect: RedirectOption | undefined = m.redirect;
99+
});
100+
101+
router.beforeEach((route, redirect, next) => {
102+
route.params;
103+
redirect("/");
104+
next();
105+
});
106+
107+
router.afterEach(route => {
108+
route.params;
109+
});
110+
111+
router.push({
112+
path: "/",
113+
params: {
114+
foo: "foo"
115+
},
116+
query: {
117+
bar: "bar"
118+
},
119+
hash: "hash"
120+
});
121+
router.replace({ name: "home" });
122+
123+
router.go(-1);
124+
router.back();
125+
router.forward();
126+
127+
const Components: ComponentOptions<Vue> | typeof Vue = router.getMatchedComponentes();
128+
129+
const vm = new Vue({
130+
router,
131+
template: `
132+
<div id="app">
133+
<h1>Basic</h1>
134+
<ul>
135+
<li><router-link to="/">/</router-link></li>
136+
<li><router-link to="/foo">/foo</router-link></li>
137+
<li><router-link to="/bar">/bar</router-link></li>
138+
</ul>
139+
<router-view class="view"></router-view>
140+
</div>
141+
`
142+
}).$mount("#app");
143+
144+
vm.$router.push("/");
145+
vm.$route.params;

‎types/test/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "commonjs",
5+
"noImplicitAny": true,
6+
"strictNullChecks": true,
7+
"noEmit": true
8+
},
9+
"include": [
10+
"*.ts",
11+
"../*.d.ts"
12+
]
13+
}

‎types/typings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "vue-router",
3+
"main": "index.d.ts"
4+
}

‎types/vue.d.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Augment the typings of Vue.js
3+
*/
4+
5+
import Vue = require("vue");
6+
import VueRouter = require("./index");
7+
import { Route, RawLocation } from "./index";
8+
9+
declare module "vue/types/vue" {
10+
interface Vue {
11+
$router: VueRouter;
12+
$route: Route;
13+
}
14+
}
15+
16+
declare module "vue/types/options" {
17+
interface ComponentOptions<V extends Vue> {
18+
router?: VueRouter;
19+
20+
beforeRouteEnter?: (
21+
this: never,
22+
route: Route,
23+
redirect: (location: RawLocation) => void,
24+
next: (callback: (vm: V) => any) => void
25+
) => any;
26+
27+
beforeRouteLeave?: (
28+
this: V,
29+
route: Route,
30+
redirect: (location: RawLocation) => void,
31+
next: () => void
32+
) => any;
33+
}
34+
}

0 commit comments

Comments
 (0)