JSPM + TypeScript + PhotoSwipe : How to successfully import and use the library?

user_1006127 0
Viewed 1006

I'm trying to use the PhotoSwipe library in my JSPM and TypeScript project with no success (I'm bleeding here.. ).

Using a modified version definition file for the PhotoSwipe from DefinitelyTyped (the original didn't work - got "PhotoSwipe not defined"), I came up with this:

declare var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
declare var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;

declare module PhotoSwipe {
    ...
    interface IPhotoSwipeStatic {

        new <T extends Options> (pswpElement: HTMLElement,
            uiConstructor: (new (pswp: PhotoSwipeInstance<T>, framework: UIFramework) => UI<T>) | boolean,
            items: PhotoSwipe.Item[],
            options: T): PhotoSwipeInstance<T>;
    }
}

declare class PhotoSwipeInstance<T extends PhotoSwipe.Options> {
    ...
}


declare module PhotoSwipeUI_Default {
    ...
    interface IPhotoSwipeUI_DefaultStatic {

        new (pswp: PhotoSwipeInstance<Options>, framework: PhotoSwipe.UIFramework): PhotoSwipeUI_DefaultInstance;
    }
}

declare class PhotoSwipeUI_DefaultInstance implements PhotoSwipe.UI<PhotoSwipeUI_Default.Options> {
    ...
}

Trying to import it, I can't seem to figure how to create an instance of PhotoSwipe with:

const photoSwipe = new PhotoSwipe(pswpElement, PhotoSwipe.PhotoSwipeUI, items, options);

1) 

declare module "photoswipe" {
    export = { PhotoSwipe, PhotoSwipeUI_Default };
}

and import "photoswipe"; => I get ReferenceError: PhotoSwipe is not defined

2) 

declare module "photoswipe" {

    export var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
    export var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;
}

and import { PhotoSwipe, PhotoSwipeUI_Default } from "photoswipe"; => I get TypeError: photoswipe_1.PhotoSwipe is not a constructor

Anyone ?

photoswipe jspm typescript
3 Answers
npm install photoswipe
npm install --save @types/photoswipe

install photoswipe and it's type defination from npm.

import photoSwipe from 'photoswipe'

then you can use it using above import statement.

hope this will help.

user_88476040

Install deps:

npm i photoswipe
npm i -D @types/photoswipe

Use it with:

import PhotoSwipe from 'photoswipe'
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
user_24707530
Related