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 #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 <notifications@github.com> 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 <#65 (comment)>, 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 <notifications@github.com> 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 <#65 (comment)>, 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"
  ]
}