Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Would be nice to add type declarations for typescript #15

Open
garyo opened this issue Dec 9, 2020 · 10 comments
Open

Would be nice to add type declarations for typescript #15

garyo opened this issue Dec 9, 2020 · 10 comments

Comments

@garyo
Copy link

garyo commented Dec 9, 2020

I got it working by adding a .d.ts containing just declare module vue-shepherd but it would be good to include a more complete type declaration for typescript users.

@RobbieTheWagner
Copy link
Member

Hi @garyo, I totally agree! We have the types in the main Shepherd repo here https://github.com/shipshapecode/shepherd/tree/master/src/types

Can those be imported and used?

@garyo
Copy link
Author

garyo commented Dec 9, 2020

I would think so, though you'll still need to add types for the things you add to the Vue prototype.
I'm just getting started with vue-shepherd (migrating from vue-tour) and I'm typing my steps using the Shepherd types; that works fine.

@RobbieTheWagner
Copy link
Member

@garyo I don't think we added anything to this Vue wrapper really. I had plans to add more features, but I've been busy with other things. If you'd like to add imports of the types here and/or other features, we would love the help!

@garyo
Copy link
Author

garyo commented Dec 9, 2020

I'm realizing the same thing -- I think it's trivial to just use shepherd.js in my Vue app, no real need for this wrapper. I just made a Tour.vue that imports shepherd.js directly.

@jim-toth
Copy link

jim-toth commented Mar 8, 2021

You could also add this to your declaration file to make use of the injected function as intended, with types from shepherd.js

import Shepherd from 'shepherd.js'

declare module 'vue-shepherd'

declare module 'vue/types/vue' {
  // this.$myInjectedFunction inside Vue components
  interface Vue {
    $shepherd: (...args: any[]) => Shepherd.Tour
  }
}

@RobbieTheWagner
Copy link
Member

@jim-toth perhaps we should use that as the types for this repo? I would definitely accept a PR adding a types file.

@manuel-84
Copy link

if i use declare module 'vue-shepherd'
i get error ts2665: invalid module name in augmentation. Module 'vue-shepherd' resolves to an untyped module at '...node_modules/vue-shepherd/dist/vue-shepherd.common.js', which cannot be augmented

@RobbieTheWagner
Copy link
Member

@manuel-84 sorry to hear that. As mentioned above, I would accept a PR to fix TS. The types exist in Shepherd itself.

@losfroger
Copy link

For the composition api the following declaration file works really well:

import Shepherd from 'shepherd.js'


declare module 'vue-shepherd' {
  export function useShepherd(...args: Array<Shepherd.Tour.TourOptions>): Shepherd.Tour
}

@RobbieTheWagner
Copy link
Member

If anyone would like to open a PR adding types, I would gladly accept it!

Kenneth-Sills added a commit to Kenneth-Sills/vue-shepherd-typing that referenced this issue Apr 9, 2024
Thanks to @losfroger and @jim-toth in the related issue. This implementation
was a merge of their recommended fixes and the official Vue 3 Options API
Type Augmentation documentation.

I've tested the module definitions against a real-world Vue 3 codebase in both
Composition and Options API mode.

Closes shepherd-pro#15.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants