前回の記事の手順でTypeScriptでJavaScriptのライブラリを使おうとしたところ

‘クラス名’ refers to a UMD global, but the current file is a module. Consider adding an import instead.

が出たのでその原因と対処法。

経緯

1. vivus.jsというsvgのアニメーションライブラリを前回の記事と同様の手順で使用
2. typeScript書いてコンパイル
3. ‘Vivus’ refers to a UMD global, but the current file is a module. Consider adding an import instead.
4. てぅんてぅんてぅん〜ん（やられ音）

原因

使おうとしたファイルで自分の書いたモジュールをインポートしていたためroot containerがVivusのroot containerと異なったせい。多分。そんな感じ。

ファイルはだいたいこんなん

//自分の作ったmoduleを読み込み
import hoge = require('./module/_mod');
//使う
hoge.func1();

//ここでエラー
new Vivus('x-svg', {start: "autostart",file: '/public/img/hogehoge.svg', type: 'oneByOne', duration: 800}); 

詳しくはこちらのサイトを参考に

TypeScript の型定義ファイルと仲良くなろう

対処法その１（非推奨）：moduleをimportしない

modeuleをimportしなければどちらもgrobal containerがrootになるのでコンパイルは通る。

しかし自分で作ったモジュールをインポートして使えないので不便。今はテストで読み込んだだけなのでいいですが、今後困りますよね。

無理。却下。

対処法その2（おすすめ！）：型定義ファイルを書きかえる

Jqueryなら自分のファイルをインポートしてても使えたので型定義ファイルをどうにかすれば使えるはず。ということで見てみました。

export = Vivus;
export as namespace Vivus;

declare class Vivus {
//以下いろいろ

という感じになってました。

classにdeclareがついてるならexportいらないのでは…？ということで

//export = Vivus;
//export as namespace Vivus;

declare class Vivus {
//以下いろいろ

てな感じにとりあえずコメントアウトしたら動きました。

コンパイルも通るし補完もきいたしコンパイル後も動きました！めでたい！

あんまり深く理解していませんがまあ型定義ファイルは定義だけなのでコンパイルさえ通ったらとりあえすいいんじゃないかと思います（適当）。

とにかく良かったです。終わり。

ではまた。