Skip to content

Commit dfc64e8

Browse files
kaorun343yyx990803
kaorun343
authored and
yyx990803
committed
Add TypeScript definitions
Add TypeScript definition Remove unnecessary definition Update definitions * separate files * remove unnecessary `{[key: string]: any}` * from singular to plural Update definitions * Add more definitions * Rename filename and interface * Sort definitions * Fix indent Fix Add test * add test * fix some definitions * fix typo Fix ComputedOptions Update Vue.set Update definitions Add npm script
1 parent 2998bbf commit dfc64e8

11 files changed

+469
-1
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,13 @@
1717
"dev:compiler": "TARGET=web-compiler rollup -w -c build/config.js",
1818
"build": "node build/build.js",
1919
"build:ssr": "npm run build -- vue.common.js,vue-server-renderer",
20-
"test": "npm run lint && flow check && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr",
20+
"test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr",
2121
"test:unit": "karma start build/karma.unit.config.js",
2222
"test:cover": "karma start build/karma.cover.config.js",
2323
"test:e2e": "npm run build -- vue.js && node test/e2e/runner.js",
2424
"test:ssr": "npm run build:ssr && VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json",
2525
"test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
26+
"test:types": "tsc -p ./types/test/tsconfig.json",
2627
"lint": "eslint src build test",
2728
"flow": "flow check",
2829
"sauce": "SAUCE=true karma start build/karma.sauce.config.js",

‎types/index.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import {Vue} from "./vue.d";
2+
export = Vue;

‎types/options.d.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Vue } from "./vue.d";
2+
import { VNode, VNodeDirective } from "./vnode.d";
3+
4+
type Constructor = {
5+
new (...args: any[]): any;
6+
}
7+
8+
export interface ComponentOptions {
9+
data?: Object | ( (this: Vue) => Object );
10+
props?: string[] | { [key: string]: PropOptions | Constructor | Constructor[] };
11+
propsData?: Object;
12+
computed?: { [key: string]: ((this: Vue) => any) | ComputedOptions };
13+
methods?: { [key: string]: Function };
14+
watch?: { [key: string]: ({ handler: WatchHandler } & WatchOptions) | WatchHandler | string };
15+
16+
el?: Element | String;
17+
template?: string;
18+
render?(createElement: typeof Vue.prototype.$createElement): VNode;
19+
staticRenderFns?: (() => VNode)[];
20+
21+
beforeCreate?(): void;
22+
created?(): void;
23+
beforeDestroy?(): void;
24+
destroyed?(): void;
25+
beforeMount?(): void;
26+
mounted?(): void;
27+
beforeUpdate?(): void;
28+
updated?(): void;
29+
30+
directives?: { [key: string]: DirectiveOptions | DirectiveFunction };
31+
components?: { [key: string]: ComponentOptions | typeof Vue };
32+
transitions?: { [key: string]: Object };
33+
filters?: { [key: string]: Function };
34+
35+
parent?: Vue;
36+
mixins?: (ComponentOptions | typeof Vue)[];
37+
name?: string;
38+
extends?: ComponentOptions | typeof Vue;
39+
delimiters?: [string, string];
40+
}
41+
42+
export interface PropOptions {
43+
type?: Constructor | Constructor[] | null;
44+
required?: boolean;
45+
default?: any;
46+
validator?(value: any): boolean;
47+
}
48+
49+
export interface ComputedOptions {
50+
get?(this: Vue): any;
51+
set?(this: Vue, value: any): void;
52+
cache?: boolean;
53+
}
54+
55+
export type WatchHandler = <T>(val: T, oldVal: T) => void;
56+
57+
export interface WatchOptions {
58+
deep?: boolean;
59+
immediate?: boolean;
60+
}
61+
62+
export type DirectiveFunction = (
63+
el: HTMLElement,
64+
binding: VNodeDirective,
65+
vnode: VNode,
66+
oldVnode: VNode
67+
) => void;
68+
69+
export interface DirectiveOptions {
70+
bind?: DirectiveFunction;
71+
update?: DirectiveFunction;
72+
componentUpdated?: DirectiveFunction;
73+
unbind?: DirectiveFunction;
74+
}

‎types/plugin.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Vue as _Vue } from "./vue.d";
2+
3+
export type PluginFunction<T> = (Vue: typeof _Vue, options?: T) => void;
4+
5+
export interface PluginObject<T> {
6+
install: PluginFunction<T>;
7+
[key: string]: any;
8+
}

‎types/test/options-test.ts

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Vue } from "../vue.d";
2+
import { ComponentOptions } from "../options.d";
3+
4+
interface Component extends Vue {
5+
a: number;
6+
}
7+
8+
const Options: ComponentOptions = {
9+
data() {
10+
return {
11+
a: 1
12+
}
13+
},
14+
props: {
15+
size: Number,
16+
name: {
17+
type: String,
18+
default: 0,
19+
required: true,
20+
validator(value) {
21+
return value > 0;
22+
}
23+
}
24+
},
25+
propsData: {
26+
msg: "Hello"
27+
},
28+
computed: {
29+
aDouble(this: Component) {
30+
return this.a * 2;
31+
},
32+
aPlus: {
33+
get(this: Component) {
34+
return this.a + 1;
35+
},
36+
set(this: Component, v: number) {
37+
this.a = v - 1;
38+
},
39+
cache: false
40+
}
41+
},
42+
methods: {
43+
plus(this: Component) {
44+
this.a++;
45+
}
46+
},
47+
watch: {
48+
'a': function(val: number, oldVal: number) {
49+
console.log(`new: ${val}, old: ${oldVal}`);
50+
},
51+
'b': 'someMethod',
52+
'c': {
53+
handler(val: number, oldval: number) {},
54+
deep: true
55+
}
56+
},
57+
el: "#app",
58+
template: "<div>{{ message }}</div>",
59+
render(createElement) {
60+
return createElement("div", {
61+
attrs: {
62+
id: "foo"
63+
},
64+
props: {
65+
myProp: "bar"
66+
},
67+
domProps: {
68+
innerHTML: "baz"
69+
},
70+
on: {
71+
click: new Function
72+
},
73+
nativeOn: {
74+
click: new Function
75+
},
76+
class: {
77+
foo: true,
78+
bar: false
79+
},
80+
style: {
81+
color: 'red',
82+
fontSize: '14px'
83+
},
84+
key: 'myKey',
85+
ref: 'myRef'
86+
}, [
87+
createElement("div", {}, "message"),
88+
"message",
89+
[createElement("div", {}, "message")]
90+
]);
91+
},
92+
staticRenderFns: [],
93+
94+
beforeCreate() {},
95+
created() {},
96+
beforeDestroy() {},
97+
destroyed() {},
98+
beforeMount() {},
99+
mounted() {},
100+
beforeUpdate() {},
101+
updated() {},
102+
103+
directives: {
104+
a: {
105+
bind() {},
106+
update() {},
107+
componentMounted() {},
108+
unbind() {}
109+
},
110+
b(el, binding, vnode, oldVnode) {
111+
el.textContent;
112+
113+
binding.name;
114+
binding.value;
115+
binding.oldValue;
116+
binding.expression;
117+
binding.arg;
118+
binding.modifiers["modifier"];
119+
}
120+
},
121+
components: {
122+
a: Vue.component(""),
123+
b: {} as ComponentOptions
124+
},
125+
transitions: {},
126+
filters: {
127+
double(value: number) {
128+
return value * 2;
129+
}
130+
},
131+
parent: new Vue,
132+
mixins: [Vue.component(""), ({} as ComponentOptions)],
133+
name: "Component",
134+
extends: {} as ComponentOptions,
135+
delimiters: ["${", "}"]
136+
}

‎types/test/plugin-test.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Vue } from "../vue.d";
2+
import { PluginFunction, PluginObject } from "../plugin.d";
3+
4+
class Option {
5+
prefix: string;
6+
suffix: string;
7+
}
8+
9+
const plugin: PluginObject<Option> = {
10+
install(Vue, option) {
11+
if (typeof option !== "undefined") {
12+
const {prefix, suffix} = option;
13+
}
14+
}
15+
}
16+
const installer: PluginFunction<Option> = function(Vue, option) { }
17+
18+
Vue.use(plugin, new Option);
19+
Vue.use(installer, new Option);

‎types/test/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "commonjs",
5+
"noImplicitAny": true,
6+
"strictNullChecks": true,
7+
"noEmit": true
8+
},
9+
"files": [
10+
"../index.d.ts",
11+
"../options.d.ts",
12+
"../plugin.d.ts",
13+
"../vnode.d.ts",
14+
"../vue.d.ts",
15+
"options-test.ts",
16+
"plugin-test.ts",
17+
"vue-test.ts"
18+
],
19+
"compileOnSave": false
20+
}

‎types/test/vue-test.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Vue } from "../vue.d";
2+
3+
class Test extends Vue {
4+
testProperties() {
5+
this.$data;
6+
this.$el;
7+
this.$options;
8+
this.$parent;
9+
this.$root;
10+
this.$children;
11+
this.$refs;
12+
this.$slots;
13+
this.$isServer;
14+
}
15+
16+
testMethods() {
17+
this.$mount("#app", false);
18+
this.$forceUpdate();
19+
this.$destroy();
20+
this.$set({}, "key", "value");
21+
this.$delete({}, "key");
22+
this.$watch("a", (val: number, oldVal: number) => {}, {
23+
immediate: true,
24+
deep: false
25+
})();
26+
this.$watch(() => {}, (val: number) => {});
27+
this.$on("", () => {});
28+
this.$once("", () => {});
29+
this.$off("", () => {});
30+
this.$emit("", 1, 2, 3);
31+
this.$nextTick(function() {
32+
this.$nextTick;
33+
});
34+
this.$createElement("div", {}, "message", "");
35+
}
36+
37+
static testConfig() {
38+
const { config } = this;
39+
config.silent;
40+
config.optionMergeStrategies;
41+
config.devtools;
42+
config.errorHandler = (err, vm) => {
43+
if (vm instanceof Test) {
44+
vm.testProperties();
45+
vm.testMethods();
46+
}
47+
};
48+
config.keyCodes = { esc: 27 };
49+
}
50+
51+
static testMethods() {
52+
this.extend({
53+
data() {
54+
return {
55+
msg: ""
56+
};
57+
}
58+
});
59+
this.nextTick(() => {});
60+
this.set({}, "", "");
61+
this.set([true, false, true], 1, true);
62+
this.delete({}, "");
63+
this.directive("", {bind() {}});
64+
this.filter("", (value: number) => value);
65+
this.component("", { data: () => ({}) });
66+
this.use;
67+
this.mixin(Test);
68+
this.compile("<div>{{ message }}</div>");
69+
}
70+
}

‎types/typings.json

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

0 commit comments

Comments
 (0)