Vue Wait with Typescript #65

fraparisi · 2018-12-21T16:05:51Z

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

The text was updated successfully, but these errors were encountered:

fraparisi · 2018-12-21T16:45:43Z

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

antoniogiroz · 2019-03-10T14:18:17Z

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 · 2019-03-11T08:03:51Z

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 · 2019-03-16T18:42:24Z

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

fraparisi · 2019-03-17T11:09:43Z

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 · 2019-04-04T15:00:32Z

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 · 2019-04-04T19:39:49Z

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 · 2019-04-05T00:22:59Z

@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 · 2019-04-06T13:47:54Z

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 · 2019-04-11T05:41:14Z

@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 · 2019-04-11T23:13:36Z

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 · 2019-04-12T12:47:34Z

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 · 2019-04-12T12:48:27Z

file? I can immediat

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

antoniogiroz · 2019-04-13T08:39:47Z

@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 · 2019-04-15T09:57:25Z

@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 · 2019-08-09T00:53:30Z

@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 · 2019-08-09T11:30:28Z

Can you open a PR?

…

antoniogiroz · 2019-08-09T19:05:55Z

@ArthurN That's great!

Thanks!

Sunhat · 2020-08-02T03:49:33Z

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 · 2020-08-26T06:32:28Z

I'm having same issue.

Probably because the waitFor type definition does not exist.

axieum · 2021-01-16T04:41:21Z

@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 · 2021-03-10T13:52:57Z

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 · 2021-03-10T13:53:49Z

Can you open this as a PR?

fraparisi changed the title ~~Vue Wait with Typescript in Readme~~ Vue Wait with Typescript Dec 21, 2018

ArthurN mentioned this issue Aug 12, 2019

Typescript support: extend Vue interfaces #79

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue Wait with Typescript #65

Vue Wait with Typescript #65

fraparisi commented Dec 21, 2018 •

edited

Loading

fraparisi commented Dec 21, 2018

antoniogiroz commented Mar 10, 2019

fraparisi commented Mar 11, 2019

antoniogiroz commented Mar 16, 2019

fraparisi commented Mar 17, 2019 via email

DavidLambauer commented Apr 4, 2019

fraparisi commented Apr 4, 2019 via email

yoyoys commented Apr 5, 2019 •

edited

Loading

antoniogiroz commented Apr 6, 2019

DavidLambauer commented Apr 11, 2019

f commented Apr 11, 2019

fraparisi commented Apr 12, 2019

fraparisi commented Apr 12, 2019

antoniogiroz commented Apr 13, 2019

fraparisi commented Apr 15, 2019 •

edited

Loading

ArthurN commented Aug 9, 2019

f commented Aug 9, 2019 via email

antoniogiroz commented Aug 9, 2019

Sunhat commented Aug 2, 2020

butaosuinu commented Aug 26, 2020

axieum commented Jan 16, 2021

ufhy commented Mar 10, 2021

f commented Mar 10, 2021

Vue Wait with Typescript #65

Vue Wait with Typescript #65

Comments

fraparisi commented Dec 21, 2018 • edited Loading

fraparisi commented Dec 21, 2018

antoniogiroz commented Mar 10, 2019

fraparisi commented Mar 11, 2019

antoniogiroz commented Mar 16, 2019

fraparisi commented Mar 17, 2019 via email

DavidLambauer commented Apr 4, 2019

fraparisi commented Apr 4, 2019 via email

yoyoys commented Apr 5, 2019 • edited Loading

antoniogiroz commented Apr 6, 2019

DavidLambauer commented Apr 11, 2019

f commented Apr 11, 2019

fraparisi commented Apr 12, 2019

fraparisi commented Apr 12, 2019

antoniogiroz commented Apr 13, 2019

fraparisi commented Apr 15, 2019 • edited Loading

ArthurN commented Aug 9, 2019

f commented Aug 9, 2019 via email

antoniogiroz commented Aug 9, 2019

Sunhat commented Aug 2, 2020

butaosuinu commented Aug 26, 2020

axieum commented Jan 16, 2021

ufhy commented Mar 10, 2021

f commented Mar 10, 2021

fraparisi commented Dec 21, 2018 •

edited

Loading

yoyoys commented Apr 5, 2019 •

edited

Loading

fraparisi commented Apr 15, 2019 •

edited

Loading