TypeScript @type definition

[lucabecchetti]

How can I use it in typescript?

[glorat]

As a beginnings of a solution, I got this working with two shims.

vue-tour.d.ts

declare module 'vue-tour' {
    const VueTour: any;
    export default VueTour;

    export interface Tour {
        start(): void
        currentStep: any
    }
}

Obviously one needs to add all the methods you use to Tour but it is a start

shims-vue.d.ts

import {Tour} from 'vue-tour';

declare module "vue/types/vue" {
  interface Vue {
    $tours: Record<string, Tour>;
  }
}

[glorat]

I've got my whole typescript environment working nicely based on the above. @HZooly - are you actively working on this already? If not, I'd be happy to submit a PR that gets you a reasonable way forward. I'm sort of keen to find something to give back to this project given how awesome I've both used and customised vue-tour for my purposes

[HZooly]

Hi @glorat, if you already have something on your side, feel free to submit a pull request 😊
I haven't started to implement typings here.

[mohsinkhan00700]

It solved my problem as well but I have started facing issues in running my tests on Jenkins.
Can somebody help me on this

/**

• Shims vue declaration.
  */
  import Vue from 'vue';

declare module '*.vue' {
export default Vue;
}

import {Tour} from 'vue-tour';

declare module "vue/types/vue" {
interface Vue {
$tours: Record<string, Tour>;
}
}

// this is vue-tour.d.ts
declare module 'vue-tour' {
const VueTour: any;
export default VueTour;

export interface Tour {
    start(): void
    currentStep: any
}

}

Below is the error log

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
tests/unit/SearchField.spec.ts:5:25 - error TS2307: Cannot find module '@/sections/MainMenu/components/SearchField.vue'.

5 import SearchField from '@/sections/MainMenu/components/SearchField.vue';
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[glorat]

@mohsinkhan00700 those typescript errors have nothing to do with vue-tour

[glorat]

Hi @glorat, if you already have something on your side, feel free to submit a pull request 😊
I haven't started to implement typings here.

I'm happy to get a working set of typings files but there's the question of how to publish them. Your options are

1. Publish in this repo following typescript guidelines. From a maintenance point of view this is arguably the best but I don't know how to integrate into your project. https://github.com/glorat/vue-tour/tree/typings is a start but I don't even know how to test
2. Publish the types to https://github.com/DefinitelyTyped/DefinitelyTyped so that people can install with npm install @types/vue-tour. Easy to get working and test. But it is in a separate package and codebase, which is trickier to maintain, especially if the API changes

See https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html for more details

[HZooly]

@Outpox do you have opinion about it?

I would opt for the first choice. I would put typings files in a types or typings folder at root of repository.
But second option is more centralized, allow Vue Tour to have a lighter size, get all benefits of DefinitelyTyped community.

[Outpox]

In my opinion we should package the typings in vue-tour as we've got full control of the library.
Regarding the location, I'd say types in the root folder.

[glorat]

I support the above opinion and testing was far easier than I realised (I just symlinked the vue-tour project into the node_modules of my consuming project). PR has been raised at #115

[HZooly]

Feature is now published in Vue Tour 1.3.1 #115

[KajsaEklof]

I was getting the error "No overload matches this call" on Vue.use(VueTour). Using Vue 2.0 and TypeScript.

Fixed it by adding the below in vue-tour.d.ts

import { PluginFunction } from 'vue';

declare module 'vue-tour' {
  export function install(options: any): PluginFunction<any>;
}