types: add typing support (#1717)

* types: add typing support

* types: remove `ComponentCustomProperties`

Author: kiaking

README.md

@@ -44,6 +44,27 @@ app.use(store)
 app.mount('#app')
 ```
 
+### Typings for `ComponentCustomProperties`
+
+Vuex 4 removes its global typings for `this.$store` within Vue Component due to solving [issue #994](https://github.com/vuejs/vuex/issues/994). When using TypeScript, you must provide your own augment declaration.
+
+Please place the following code in your project to have `this.$store` working.
+
+```ts
+// vuex-shim.d.ts
+
+declare module "@vue/runtime-core" {
+  // Declare your own store states.
+  interface State {
+    count: number
+  }
+
+  interface ComponentCustomProperties {
+    $store: Store<State>;
+  }
+}
+```
+
 ## Known issues
 
 - The code is kept as close to Vuex 3 code base as possible, and there're plenty of places where we should refactor. However, we are waiting for all of the test cases to pass before doing so (some tests require Vue 3 update).

package.json

@@ -21,7 +21,7 @@
     "build:main": "node scripts/build-main.js",
     "build:logger": "node scripts/build-logger.js",
     "lint": "eslint src test",
-    "test": "npm run lint && npm run test:unit && npm run test:ssr && npm run test:e2e",
+    "test": "npm run lint && npm run test:unit && npm run test:ssr && npm run test:types && npm run test:e2e",
     "test:unit": "jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
     "test:e2e": "node test/e2e/runner.js",
     "test:ssr": "cross-env VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
@@ -49,6 +49,7 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.1",
+    "@types/node": "^13.13.0",
     "@vue/compiler-sfc": "3.0.0-beta.2",
     "babel-core": "^6.22.1",
     "babel-loader": "^7.1.2",
@@ -74,7 +75,7 @@
     "rollup": "^2.6.1",
     "rollup-plugin-terser": "^5.3.0",
     "todomvc-app-css": "^2.1.0",
-    "typescript": "^3.7.2",
+    "typescript": "^3.8.3",
     "vue": "3.0.0-beta.2",
     "vue-loader": "16.0.0-alpha.3",
     "vue-template-compiler": "^2.5.22",

types/helpers.d.ts

@@ -1,12 +1,12 @@
-import Vue from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { Dispatch, Commit } from './index';
 
 type Computed = () => any;
 type InlineComputed<T extends Function> = T extends (...args: any[]) => infer R ? () => R : never
 type MutationMethod = (...args: any[]) => void;
 type ActionMethod = (...args: any[]) => Promise<any>;
 type InlineMethod<T extends (fn: any, ...args: any[]) => any> = T extends (fn: any, ...args: infer Args) => infer R ? (...args: Args) => R : never
-type CustomVue = Vue & Record<string, any>;
+type CustomVue = ComponentPublicInstance & Record<string, any>;
 
 interface Mapper<R> {
   <Key extends string>(map: Key[]): { [K in Key]: R };

types/index.d.ts

@@ -1,4 +1,4 @@
-import _Vue, { WatchOptions } from "vue";
+import { App, WatchOptions, InjectionKey } from "vue";
 
 // augment typings of Vue.js
 import "./vue";
@@ -13,6 +13,8 @@ export declare class Store<S> {
   readonly state: S;
   readonly getters: any;
 
+  install(app: App, injectKey?: InjectionKey<Store<any>>): void;
+
   replaceState(state: S): void;
 
   dispatch: Dispatch;
@@ -39,7 +41,7 @@ export declare class Store<S> {
   }): void;
 }
 
-export declare function install(Vue: typeof _Vue): void;
+export function createStore<S>(options: StoreOptions<S>): Store<S>;
 
 export interface Dispatch {
   (type: string, payload?: any, options?: DispatchOptions): Promise<any>;
@@ -142,7 +144,6 @@ export interface ModuleTree<R> {
 
 declare const _default: {
   Store: typeof Store;
-  install: typeof install;
   mapState: typeof mapState,
   mapMutations: typeof mapMutations,
   mapGetters: typeof mapGetters,

types/test/helpers.ts

@@ -1,4 +1,4 @@
-import Vue from "vue";
+import { createApp } from "vue";
 
 import {
   mapState,
@@ -10,7 +10,7 @@ import {
 
 const helpers = createNamespacedHelpers('foo');
 
-new Vue({
+createApp({
   computed: {
     ...mapState(["a"]),
     ...mapState('foo', ["b"]),

types/test/index.ts

@@ -1,9 +1,6 @@
-import Vue from "vue";
 import * as Vuex from "../index";
 import createLogger from "../../dist/logger";
 
-Vue.use(Vuex);
-
 namespace StoreInstance {
   const store = new Vuex.Store({
     state: {

types/test/tsconfig.json

@@ -1,13 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
+    "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
     "lib": [
-      "es5",
-      "dom",
-      "es2015.promise",
-      "es2015.core"
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "node"
     ],
     "strict": true,
     "noEmit": true

types/test/vue.ts

@@ -1,4 +1,4 @@
-import Vue from "vue";
+import { createApp } from "vue";
 import * as Vuex from "../index";
 
 const store = new Vuex.Store({
@@ -7,8 +7,6 @@ const store = new Vuex.Store({
   }
 });
 
-const vm = new Vue({
+const app = createApp({
   store
 });
-
-vm.$store.state.value;

types/tsconfig.json

@@ -1,12 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
+    "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
     "lib": [
-      "es5",
-      "dom",
-      "es2015.promise"
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "node"
     ],
     "strict": true,
     "noEmit": true

types/vue.d.ts

@@ -2,17 +2,11 @@
  * Extends interfaces in Vue.js
  */
 
-import Vue, { ComponentOptions } from "vue";
+import { ComponentCustomOptions, ComponentCustomProperties } from "vue";
 import { Store } from "./index";
 
-declare module "vue/types/options" {
-  interface ComponentOptions<V extends Vue> {
+declare module "@vue/runtime-core" {
+  interface ComponentCustomOptions {
     store?: Store<any>;
   }
 }
-
-declare module "vue/types/vue" {
-  interface Vue {
-    $store: Store<any>;
-  }
-}