nuxt / typescript

TypeScript Support for Nuxt 2
https://typescript.nuxtjs.org
MIT License
570 stars 124 forks source link

Context has any type for state #518

Closed ayelsew closed 1 year ago

ayelsew commented 2 years ago

Describe the bug I trying to make an middleware, that check if user is logged, so I need to access state in store of vuex. But de context parameter of middleware has state like any type.

const isLogged: Middleware = ({ store }: Context) => {
  store.state // this has any
}

To Reproduce Steps to reproduce the behavior:

  1. Make a empty nuxt typscript project version 2.15.8
  2. Create a store with anything state
  3. Create a middleware
  4. Try to access state from store at context parameter with intelisense help

Expected behavior When we use context the store must have types

Additional context I tried to explicit declare store with follow code:

declare module '@nuxt/types' {
  interface Context {
    store: Store<RootState>
  }
}

But it's emits a error:

Subsequent property declarations must have the same type. Property 'store' must be of type 'Store', but here has type 'Store'.ts(2717) index.d.ts(49, 3): 'store' was also declared here. (property) Context.store: Store

Package JSON

//...
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/firebase": "^7.5.0",
    "@tiptap/extension-blockquote": "^2.0.0-beta.14",
    "@tiptap/extension-code-block": "^2.0.0-beta.16",
    "@tiptap/extension-history": "^2.0.0-beta.13",
    "@tiptap/extension-image": "^2.0.0-beta.14",
    "@tiptap/extension-link": "^2.0.0-beta.18",
    "@tiptap/extension-text-align": "^2.0.0-beta.20",
    "@tiptap/extension-underline": "^2.0.0-beta.15",
    "@tiptap/starter-kit": "^2.0.0-beta.80",
    "@tiptap/vue-2": "^2.0.0-beta.38",
    "core-js": "^3.9.1",
    "firebase": "^8.6.2",
    "marked": "^2.0.7",
    "nuxt": "^2.15.8",
    "validator": "^13.6.0",
    "vuex": "^3.6.2",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/vuetify": "^1.11.3",
    "@types/validator": "^13.1.4",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.7.0",
    "typescript": "^4.3.5"
  }
  //...
apgapg commented 2 years ago

You can try casting as RootState where RootState is the type declaration in your respective store

rchl commented 1 year ago

Yes, you have to manually cast the Store (or state). Vuex is not very type friendly.

Screenshot 2023-03-13 at 18 12 39