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

TypeScript definition? #139

Closed
phil-scott-78 opened this issue Mar 21, 2018 · 10 comments

Comments

@phil-scott-78
Copy link

commented Mar 21, 2018

Version

2.2.x

Vue.js version

2.5

What is expected?

Use component from a TS project

What is actually happening?

Compile error due to lack of definition file.

How to reproduce this problem?

Any thoughts on adding a typescript definition file? I've thrown one together that gets things working for me. I think for ease of use and maintenance it makes the most sense to live with this project, but I could also submit it to the @types organization. Here's the "works for me" version I put together

// Type definitions for vue-infinite-loading v2.2.0
// Project: https://github.com/PeachScript/vue-infinite-loading
// Definitions by: Phil Scott <https://github.com/enkafan/>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

declare module "vue-infinite-loading"  {
    import Vue from 'vue'

    export default class InfiniteLoading extends Vue{
        distance: number;
        onInfinite: Function;
        spinner: string;
        direction: string;
        forceUseInfiniteWrapper: boolean;
    }

    export interface StateChanger {
        loaded(): void;
        complete(): void;
        reset(): void;
    }
}
@PeachScript

This comment has been minimized.

Copy link
Owner

commented Mar 26, 2018

Great work! Thank you very much, I will add definition file in the next version 👍

@PeachScript PeachScript added the feature label Mar 26, 2018

@PeachScript

This comment has been minimized.

Copy link
Owner

commented Apr 10, 2018

Hi @phil-scott-78 , I have been added the TypeScript declaration file and released a new version v2.3.1 for it, you can try it now, thank you again :D

@phil-scott-78

This comment has been minimized.

Copy link
Author

commented Apr 11, 2018

Awesome, I'll see if I can't find time to kick the tires tomorrow

@phil-scott-78

This comment has been minimized.

Copy link
Author

commented Apr 11, 2018

Pulled it down. Had to make a slight change in my import, but this will get it done 👍

Going to close the issue and thanks again!

@hartmut-co-uk

This comment has been minimized.

Copy link

commented Apr 23, 2018

Hi @phil-scott-78 what did you change for the import?
Have you got it working with TS + SSR by any chance?

@phil-scott-78

This comment has been minimized.

Copy link
Author

commented Apr 24, 2018

I'm not working with SSR myself, but I can tell you the trick for me to get it working was turning on allowSyntheticDefaultImports. Not a huge fan of having to do that, but it is enabled by default with the vue-cli's template so I suspect that it's only a matter of time before I discovered another type def that would also require it.

Once that's enabled to import I'm simply doing

import InfiniteLoading from 'vue-infinite-loading';

InfiniteLoading is a namespace so you can then use InfiniteLoading.StateChanger and InfiniteLoading.Slots to refer to those respective types.

@hartmut-co-uk

This comment has been minimized.

Copy link

commented Apr 24, 2018

Hi, thanks - that's not been the same issue I was facing.

Anyway to leave some reference... I'm on a nuxt project - and the simplest way to have it working with SSR was via nuxt 'native' <no-ssr>:

    <no-ssr>
      <infinite-loading @infinite="onInfinite" :distance="200" spinner="waveDots"></infinite-loading>
    </no-ssr>

working fine with default import InfiniteLoading from 'vue-infinite-loading' - and does not require less-loader (https://peachscript.github.io/vue-infinite-loading/#!/getting-started/server-side-rendering)

@PeachScript

This comment has been minimized.

Copy link
Owner

commented Apr 25, 2018

@hartmut-co-uk that's great! I think I should add your solution to the docs, it is the best practice, is that right?

@hartmut-co-uk

This comment has been minimized.

Copy link

commented Apr 25, 2018

@PeachScript I think so - haven't had much time to actively work with it in this setup - so wouldn't vouch for... ;-)

@PeachScript

This comment has been minimized.

Copy link
Owner

commented Apr 25, 2018

@hartmut-co-uk don't worry, someone will feedback if it has problem, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.