在Angular 2/Typescript中使用IScroll

Question

我想使用一個名爲iscroll的Javascript Libary。

到目前爲止，我得到了iscroll.d.ts，現在我想使用它，但iam新打字稿和不知道如何做到這一點。

我iscroll.d.ts看起來是這樣的：

// 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; 
} 

我的角2個page.ts看起來是這樣的：

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; 

導入工作正常，到目前爲止，我想，但我不知道如何初始化和使用iscroll。

希望你們中的一些有任何提示如何把那個生命:)

Answer 1

你使用它，就像你在普通的舊JavaScript中使用它，不同之處在於，你也可以包括類型。

例如，JavaScript的：

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

打字稿：

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

（注意不需要: IScroll，編譯器可以推斷出類型，但我添加它，使一個點）

你的情況：

export class OnboardingPage { 
    iScroll: IScroll; 

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

這個代碼是基於它們的文檔（https://github.com/cubiq/iscroll），但根據.d.ts文件您發佈它需要使用iscroll命名空間：

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

希望這有助於。