0

TypeScriptでDraggabillyを使いたいと考えています。以下のようにd.tsファイルを記述し、
ファイルの冒頭で読み込んでいます。

typings/draggabilly/draggabilly.d.ts

declare module 'draggabilly' {
  export class Draggabilly {
    x: number;
    y: number;
    constructor(container: any, options: any);
    disable(): void;
    enable(): void;
    destroy(): void;
  }
}

src/renderers/ScrollBarRenderer.ts

/// <reference path="../../typings/draggabilly/draggabilly.d.ts" />
import draggabilly = require('draggabilly');

しかし、この定義だとimport draggabilly = require('draggabilly')としたときに
実際にはClass定義が読み込まれますが、コンパイラ上はモジュールが読み込まれたことに
なってしまい、クラスをそのまま使えません。

どのようにd.tsファイルを定義したらDraggabillyをTypeScriptで使えるのでしょうか。

1 件の回答 1

3

以下の様に定義すれば使えるかと思います。

型定義ファイル:

declare module draggabilly {
  export class Draggabilly {
    x: number;
    y: number;
    constructor(container: any, options: any);
    disable(): void;
    enable(): void;
    destroy(): void;
  }
}
import Draggabilly = draggabilly.Draggabilly;

declare module "draggabilly" {
    import Draggabilly = draggabilly.Draggabilly;
    export = Draggabilly;
}

ts:

/// <reference path="./typings/draggabilly/draggabilly.d.ts" />
import Draggabilly = require("draggabilly");

var draggie = new Draggabilly(".draggable", {
    // options...
});

var htmlElement = document.getElementById("#draggable");
var draggie = new Draggabilly(htmlElement, {
    // options...
});

var element = document.querySelector(".draggable");
var draggie = new Draggabilly(element, {
    // options...
});

var draggableElems = document.querySelectorAll(".draggable");
var draggies: Draggabilly[] = [];
for (var i = 0, len = draggableElems.length; i < len; i++) {
    var draggableElem = draggableElems[i];
    var draggie = new Draggabilly(draggableElem, {
        // options...
    });
    draggies.push(draggie);
}

補足:

--moduleオプションなしでJavaScriptにコンパイルする場合、import Draggabilly = require("draggabilly");は不要です。

また、1つのクラスだけの型定義であれば、以下の様に書くこともできます。

declare class FooClass {
}

declare module "fooClass" {
    export = FooClass;
}
declare module "fooClass" {
    class FooClass {
    }

    export = FooClass;
}

ただし、1つ目の例ではトップレベルにclassやinterfaceが並び名前空間が汚染されることと、名前が重複したinterfaceがあった場合に定義が統合(マージ)されてしまう問題があります。

2つ目は、FooClassを使用するのに必ずrequire("fooClass")しなければいけない問題があります。こうしてしまうとHTMLページでdraggabilly.pkgd.min.jsを読み込んで使用するJavaScriptが書けません。(グローバルでDraggabillyが使用できないと困る)

余談

参考として、Draggabillyのドキュメントをもとに型定義ファイルを作ってみました。

  • TouchEvent等を扱うのにtouch-events.d.tsが必要です
  • on()の型定義の書き方についてはTypeScriptの型定義ファイルが参考になるかと思います
  • Optionsインターフェースを作りましたが、any型で良いかと思います

ディレクトリ:

typings
 ├─ draggabilly
 |   └─ draggabilly.d.ts
 └─ touch-events
     └─ touch-events.d.ts

型定義ファイル:

/// <reference path="../touch-events/touch-events.d.ts"/>
declare module draggabilly {
    export class Draggabilly {
        x: number;
        y: number;

        constructor(node: Node, options?: Options);
        constructor(selector: string, options?: Options);

        disable(): void;
        enable(): void;
        destroy(): void;

        on(type: "dragStart",   listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch) => any): any;
        on(type: "dragMove",    listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch, moveVector: any) => any): any;
        on(type: "dragEnd",     listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch) => any): any;
        on(type: "pointerDown", listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch) => any): any;
        on(type: "pointerMove", listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch, moveVector: any) => any): any;
        on(type: "pointerUp",   listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch) => any): any;
        on(type: "staticClick", listener: (ev: MouseEvent | TouchEvent, pointer: MouseEvent | Touch) => any): any;
        on(type: string,        listener: (...params: any[]) => any): any;
        off(type: string,       listener: (...params: any[]) => any): any;
        once(type: string,      listener: (...params: any[]) => any): any;
    }

    interface Options {
        axis?: string;
        containment?: Node | string | boolean;
        grid?: number[];
        handle?: string;
    }
}
import Draggabilly = draggabilly.Draggabilly;

declare module "draggabilly" {
    import Draggabilly = draggabilly.Draggabilly;
    export = Draggabilly;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。