Tiny-slider: want typescript type declaration files

[cyocun]

Are you planning to create typescript type declaration files?
I hope that it is easy as it is included...

thank you :)

[ganlanyuan]

Hey, I don't have this plan in the near future.
Thanks

[DominicBoettger]

👍 for typescript declarations

[StefanJelner]

I wrote some for myself and saved them in a file ./modules/tiny-slider.module.d.ts

I am not absolutely sure, whether i did everything right. but i took all of the information from the documentation. so theres no guarantee it runs completely. but as a starting point, i am quite satisfied and it works in my typescript project.

export interface ITinySliderResponsiveOptions {
    startIndex?: number;
    items?: number;
    slideBy?: number | 'page';
    speed?: number;
    autoHeight?: boolean;
    fixedWidth?: number | false;
    edgePadding?: number;
    gutter?: number;
    controls?: boolean;
    controlsText?: Array<string>;
    nav?: boolean;
    autoplay?: boolean;
    autoplayHoverPause?: boolean;
    autoplayResetOnVisibility?: boolean;
    autoplayText?: Array<string>;
    autoplayTimeout?: number;
    touch?: boolean;
    mouseDrag?: boolean;
    arrowKeys?: boolean;
    disable?: boolean;
}

export interface ITinySliderOptions extends ITinySliderResponsiveOptions {
    container?: Node | string;
    mode?: 'carousel' | 'gallery';
    axis?: 'horizontal' | 'vertical';
    controlsContainer?: Node | string | false;
    navContainer?: Node | string | false;
    navAsThumbnails?: boolean;
    autoplayDirection?: 'forward' | 'backward';
    autoplayButton?: Node | string | false;
    autoplayButtonOutput?: boolean;
    animateIn?: string;
    animateOut?: string;
    animateNormal?: string;
    animateDelay?: number | false;
    loop?: boolean;
    rewind?: boolean;
    responsive?: { [key: number]: ITinySliderResponsiveOptions } | false;
    lazyload?: boolean;
    swipeAngle?: number | boolean;
    nested?: 'inner' | 'outer' | false;
    freezable?: boolean;
    onInit?: Function | false;
}

export interface ITinySliderInfo {
    container: Node | string;
    slideItems: NodeList;
    navContainer: Node | string | false;
    navItems: NodeList;
    controlsContainer: Node | string | false;
    hasControls: boolean;
    prevButton: Node;
    nextButton: Node;
    items: number;
    slideBy: number | 'page';
    cloneCount: number;
    slideCount: number;
    slideCountNew: number;
    index: number;
    indexCached: number;
    navCurrent: number;
    navCurrentCached: number;
    visibleNavIndexes: number;
    visibleNavIndexesCached: number;
    event: Event | {};
}

export interface ITinySliderEvents {
    indexChanged(e): void;
    transitionStart(e): void;
    transitionEnd(e): void;
    touchStart(e): void;
    touchMove(e): void;
    touchEnd(e): void;
}

export interface ITinySlider {
    constructor(options?: ITinySliderOptions): ITinySlider;
    getInfo(): ITinySliderInfo;
    events(): ITinySliderEvents;
    goTo(index: number | string): void;
    play(): void;
    pause(): void;
    isOn(): boolean;
    rebuild(): void;
    destroy(): void;
}

to use it in your TypeScript you have to brutally cast it:

const options: ITinySliderOptions = { container: document.querySelector('.foo') };
const slider = TinySlider(options) as any as ITinySlider;

[openscript]

With #263 some types were added. I hope they work for you :)