以下の様に定義すれば使えるかと思います。
型定義ファイル:
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のドキュメントをもとに型定義ファイルを作ってみました。
ディレクトリ:
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;
}