vue.d.ts doesn't honor `alias about cookie-universal

[microcipcip]

You can also define it globally here.

declare module "vue/types/vue" {
  import { NuxtCookies } from 'cookie-universal-nuxt'

  interface Vue {
    $cookiez: NuxtCookies;
  }
}

declare module 'vuex/types/index' {
  import { NuxtCookies } from 'cookie-universal-nuxt'

  interface Store<S> {
    $cookiez: NuxtCookies
  }
}

[microcipcip]

Sorry @xinbenlv I have no idea how to make this work. I am afraid that for now you'll have to avoid using the alias with Typescript. If there is anybody that knows how to fix this, I'll gladly accept a PR.

[xinbenlv]

Like-wise, I think the authors of vue.d.ts might know better.

I found some references might work

• Blog post: Can I dynamically add properties to an interface in Typescript? and it's section Dynamic keys.

// file: https://github.com/microcipcip/cookie-universal/blob/1443a3d12325fb58fc9c62e3781b4e4adae206f3/packages/cookie-universal-nuxt/types/vue.d.ts#L8

shall reflect

// file: https://github.com/microcipcip/cookie-universal/blob/48486402fe1b23e3ea2ef315df3363600ff273a1/packages/cookie-universal-nuxt/lib/templates/cookie-universal-nuxt.js
import cookieUniversal from 'cookie-universal'

export default ({ req, res }, inject) => {
  const options = <%= JSON.stringify(options, null, 2) %>
  inject(options.alias, cookieUniversal(req, res, options.parseJSON))
}

Adding the author @Hiswe and @darthf1 for their wisdom.

Look forward to your comments, and if you could get to it that will be great, if not, I might go ahead and try a PR too, but I'd first trust and rely on your expertise

[microcipcip]

Thanks a lot for investigating this. I think that because Typescript is statically analized the alias functionality cannot be implemented unless we accept any key as if it were a NuxtCookies. For instance, this may work but would be quite bad:

interface Vue {
   [key: string]: NuxtCookies;
}

I think another quick fix that could actually work would be defining the NuxtCookies interface declaration manually.

However, if you manage to, I will be very happy to accept your PR.

[xinbenlv]

A quick fix I did, more of a hack, is to declare the alias within the Single-File Component

    import {Component, Prop, Vue} from 'vue-property-decorator';

    @Component
    export default class SomeComponent extends Vue {
       //...   
       $cookiez: NuxtCookies;
       //...
    }

See this file: https://github.com/google/wikiloop-battlefield/blob/0c89ad365742ce6fe803fb48178ec5c8f1771a8d/components/ActionPanel.vue#L65

And it works.

And this bug is to look for more long term solution.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.