Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

i want to use a Javascript Libary called iscroll.

So far i got the iscroll.d.ts and now i want to use it, but iam new at typescript and dont know how to do that.

My iscroll.d.ts looks like this:

// Generated by typings
// Source: https://raw.githubusercontent.com/types/typed-iscroll/8524f7c88e521c16462553173c9ea99e9e3d477c/iscroll.d.ts
declare module 'iscroll' {
class IScroll {
  version: string;

  constructor(element: string | HTMLElement, options?: IScroll.IScrollOptions);

  destroy(): void;
  resetPosition(time: number): boolean;
  disable(): void;
  enable(): void;
  refresh(): void;
  scrollTo(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void;
  scrollBy(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void;
  scrollToElement(el: HTMLElement | string, time?: number, offsetX?: number, offsetY?: number, easing?: IScroll.IScrollEaseOption): void;
  goToPage(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void;
  prev(): void;
  next(): void;
  zoom(scale: number, x: number, y: number, time?: number): void;
  refresh(): void;
  destroy(): void;

  utils: IScroll.IScrollUtils;

  // Events
  on(type: 'beforeScrollStart' |
    'scrollCancel' |
    'scrollStart' |
    'scrollEnd' |
    'flick' |
    'zoomStart' |
    'zoomEnd', fn: (evt?: any) => void): void;
  off(type: string, fn?: (evt?: any) => void): void;

}

namespace IScroll {
  export interface IScrollIndicatorOptions {
    el?: HTMLElement | string;
    fade?: boolean;
    ignoreBoundaries?: boolean;
    interactive?: boolean;
    listenX?: boolean;
    listenY?: boolean;
    resize?: boolean;
    shrink?: boolean;
    speedRatioX?: number;
    speedRatioY?: number;
  }

  export interface IScrollKeyBindings {
    pageUp?: number | string,
    pageDown: number | string;
    end: number | string;
    home: number | string;
    left: number | string;
    up: number | string;
    right: number | string;
    down: number | string;
  }

  export interface IScrollOptions {

    indicators?: IScrollIndicatorOptions;

    // Scrollbar
    scrollbars?: boolean | string;
    fadeScrollbars?: boolean;
    interactiveScrollbars?: boolean;
    resizeScrollbars?: boolean;
    shrinkScrollbars?: boolean;

    // Zoom
    zoom?: boolean;
    zoomMin?: number;
    zoomMax?: number;
    startZoom?: number;
    wheelAction?: string;

    snap?: boolean | string;

    bindToWrapper?: boolean;
    bounceEasing?: string | IScrollEaseOption;
    bounceTime?: number;
    deceleration?: number;
    mouseWheelSpeed?: number;
    preventDefaultException?: any;
    resizePolling?: number;
    probeType?: number;
    keyBindings?: boolean | IScrollKeyBindings;

    useTransform?: boolean;
    useTransition?: boolean;
    HWCompositing?: boolean;
    bounce?: boolean;
    click?: boolean;
    disableMouse?: boolean;
    disablePointer?: boolean;
    disableTouch?: boolean;
    eventPassthrough?: boolean;
    freeScroll?: boolean;
    invertWheelDirection?: boolean;
    momentum?: boolean;
    mouseWheel?: boolean;
    preventDefault?: boolean;
    tap?: boolean | string;

    scrollX?: number;
    scrollY?: number;
    startX?: number;
    startY?: number;

    // Infinite options
    infiniteElements: HTMLElement | 'string';
    cacheSize: number;
    dataset: (start: number, count: number) => Object[];
  }

  export interface IScrollEaseOption {
    style: 'string';
    fn: Function;
  }
  export interface IScrollEaseOptions {
    quadratic: IScrollEaseOption;
    circular: IScrollEaseOption;
    back: IScrollEaseOption;
    bounce: IScrollEaseOption;
    elastic: IScrollEaseOption;
  }

  export interface IScrollUtils {
    ease: IScrollEaseOptions;
  }
}

export = IScroll;
}

And my Angular 2 page.ts looks like this:

import {NavController} from "ionic-angular";
import {AngularFire, AuthProviders, AuthMethods } from "angularfire2";
import {OnInit, Inject, Component} from "@angular/core";
import {UserService} from '../../../services/UserService';
import {AuthPage} from "../home/home";
import { IScroll } from "iscroll"

@Component({
    templateUrl: "build/pages/auth/onboarding/onboarding.html",
    providers: [UserService]
})

export class OnboardingPage {

    iScroll: IScroll;

    onboardingStep: number = 1;

The Import works fine so far, i think but i dont know how to init and use iscroll.

Hope some of you got any tips how to bring that to life :)

share|improve this question

You use it just like you'd use it in plain old javascript, with the difference that you can also include types.

For example, javascript:

let myScroll = new IScroll("#CONTAINER_ID");

typescript:

let myScroll: IScroll = new IScroll("#CONTAINER_ID");

(notice that the : IScroll isn't needed, the compiler can infer the type, but I added it to make a point)

In your case:

export class OnboardingPage {
    iScroll: IScroll;

    constructor() {
        this.iScroll = new IScroll("#CONTAINER_ID");
    }
}

This code is based on their documentation (https://github.com/cubiq/iscroll) but according to the .d.ts file you posted it requires to use the iscroll namespace:

let myScroll = new iscroll.IScroll("#CONTAINER_ID");

Hope this helps.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.