Vue Wait with Typescript

[fraparisi]

I think that in Readme should be present a section for using this plugin in typescript. To add the property "wait" to new Vue({wait: new VueWait()}) you need to define a type definitions like the one attached, otherwise will be raised an error because the property does not exist. vue-wait-property.d.ts.zip

[fraparisi]

Or better is possible to include it directly in the library itself. Like vue-axios does.

[antoniogiroz]

Hi @fraparisi!

I've used the your .d.ts file, but Vue components (typescript class style) don't recognise this.$wait

How do you use $wait and others methods as waitFor?

Thanks!

[fraparisi]

Hi @algil, for fix some error in ts compiler you can try using my solution for typings as here https://github.com/f/vue-wait/pull/64. For $wait, u can place the file attached into your src and then in your main.ts use like this new Vue({ wait : new VueWait({ useVuex: true, }), render: (h) => h(App), }).$mount('#app');

[antoniogiroz]

@fraparisi are you using a project generated with Vue Cli 3?

[fraparisi]

Hi, yes, vue project generated by vue cli 3.

Il Sab 16 Mar 2019, 19:42 Antonio Gil [email protected] ha scritto:

@fraparisi https://github.com/fraparisi are you using a project generated with Vue Cli 3?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/f/vue-wait/issues/65#issuecomment-473573698, or mute the thread https://github.com/notifications/unsubscribe-auth/AeSw2vzZKYEf14rWRkUSlJxF3u_eq6Asks5vXTsQgaJpZM4ZeNTD .

[DavidLambauer]

Any update here? I would like to use the lib in my typescript classes to fix the missing async getter issue that typescript has.

Therefore I import waitFor like so

import { waitFor } from 'vue-wait';

Currently this import statement produces a typescript syntax error.

[fraparisi]

If you want u can try using my repo at https://github.com/fraparisi/vue-wait

Il Gio 4 Apr 2019, 17:00 DavidLambauer [email protected] ha scritto:

Any update here? I would like to use the lib in my typescript classes to fix the missing async getter issue that typescript has.

Therefore I import waitFor like so

import { waitFor } from 'vue-wait';

Currently this import statement produces a typescript syntax error.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/f/vue-wait/issues/65#issuecomment-479934016, or mute the thread https://github.com/notifications/unsubscribe-auth/AeSw2rrQBs18046llu6mp0Jk0JzVSvRJks5vdhORgaJpZM4ZeNTD .

[yoyoys]

@DavidLambauer For a workaround, you can install 1.3.2 version, and copy .d.ts file to your project. (I’ve put it on @/types/declare) p.s. you need restart dev server to load your own declare file.

[antoniogiroz]

Hi, yes, vue project generated by vue cli 3.

Ok, @fraparisi, but then I have 2 d.ts files:

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

// vue-wait.d.ts
import Vue from 'vue';
import VueWait from 'vue-wait';

declare module 'vue/types/vue' {
  interface VueConstructor {
    $wait: VueWait;
  }
}

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    wait?: VueWait;
  }
}

With these files wait can be used in new Vue as a property:

// main.ts
new Vue({
  router,
  store,
  i18n,
  wait,
  render: h => h(App),
}).$mount('#app');

But not in a vue component:

created() {
    this.$wait.start('something'); // this shows an error in the editor
}

[DavidLambauer]

@yoyoys adding an additional definitions file is not what I want 🙄. I suppressed the warning for the moment. Hopefully, this can be fixed soon? Unfortunately, I don't feel that I could fix it on my own.

[f]

I am not very into the TypeScript definition files, can someone add a section to the README or update the index.d.ts file? I can immediately release a new version.

[fraparisi]

Hi, yes, vue project generated by vue cli 3.

Ok, @fraparisi, but then I have 2 d.ts files:

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

// vue-wait.d.ts
import Vue from 'vue';
import VueWait from 'vue-wait';

declare module 'vue/types/vue' {
  interface VueConstructor {
    $wait: VueWait;
  }
}

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    wait?: VueWait;
  }
}

With these files wait can be used in new Vue as a property:

// main.ts
new Vue({
  router,
  store,
  i18n,
  wait,
  render: h => h(App),
}).$mount('#app');

But not in a vue component:

created() {
    this.$wait.start('something'); // this shows an error in the editor
}

I've no problem using this.$wait, PhpStorm does not emit any error. Can u show me your tsconfig.json?

[fraparisi]

file? I can immediat

I've already fix Type Description e fix the conflict in my Merge request, u can use that file.

[antoniogiroz]

@fraparisi These are my tsconfig files (I'm using a monorepo)

In the roor folder:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "types": [
      "node",
      "jest",
      "webpack",
      "webpack-env"
    ],
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

In my Vue app:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
    "strictNullChecks": false,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

[fraparisi]

@algil This is mine:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "incremental": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noImplicitAny": true,
        "baseUrl": ".",
        "types": [
            "vuetify",
            "webpack",
            "webpack-env"
        ],
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx",
        "src/**/*.html"
    ],
    "exclude": [
        "node_modules"
    ]

and is all included in one point and I don't have the same error u have. I use vue-wait like this:

import VueWait from 'vue-wait';
...
Vue.use(VueWait);
...
new Vue({
            router,
            store,
            i18n,
            wait  : new VueWait({
                                    useVuex: true,
                                }),
            render: (h) => h(App),
        }).$mount('#app');

[ArthurN]

@algil I changed VueConstructor to Vue in the vue-wait.d.ts sample code, and this seemed to work for me:

declare module 'vue/types/vue' {
  interface Vue {
    $wait: VueWait;
  }
}

This is how vuex does it.

[f]

Can you open a PR?

[antoniogiroz]

@ArthurN That's great!

Thanks!

[Sunhat]

I'm having issues with

import { waitFor } from 'vue-wait';

Any info on this?

Module '"node_modules/vue-wait"' has no exported member 'waitFor'. Did you mean to use 'import waitFor from "node_modules/vue-wait/src/types"' instead? ts(2614)

[butaosuinu]

I'm having same issue.

Probably because the waitFor type definition does not exist.

[axieum]

@f, will vue-wait add TypeScript support soon?

Here's my tsconfig.json types:

"types": [
  "@types/node",
  "@nuxt/types",
  "@nuxtjs/axios",
  "@nuxtjs/auth-next",
  "@nuxtjs/moment",
  "vue-wait"
]

[ufhy]

i use this

// shims-vue.d.ts

import VueWait from 'vue-wait';

declare module 'vue/types/options' {
    export interface ComponentOptions<V extends Vue> {
        wait?: VueWait;
    }
}

declare module 'vue/types/vue' {
    export interface Vue {
        $wait: VueWait;
    }
}

[f]

Can you open this as a PR?