nuxt / typescript

TypeScript Support for Nuxt 2

Home Page:https://typescript.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Context has any type for state

ayelsew opened this issue · comments

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"
  }
  //...

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

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

Screenshot 2023-03-13 at 18 12 39