TypeScriptの型定義ファイル(d.ts)をTSDを用いて管理する。

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

TypeScriptからJavascriptのライブラリを使う際に、
型定義ファイルを用いることで、
TypeScriptからライブラリを利用することが可能になります。

メジャーなライブラリの型定義ファイル自体はすでにインターネット上で公開されており、
また、その管理ツールも存在しております。

その管理ツールであるTSDの紹介です。

TSDの導入自体はnpmから導入する事が可能です。

npm install tsd -g

今回は、暗号化のライブラリであるCryptoJSをTSD・Bowerから導入し、
テストから導入した暗号化ライブラリが呼べることを目標とします。

設定手順

TypeScriptの雛形の準備

まずは、以下のGitHubより、TypeScriptの雛形を落とします。

typescript-project-sample

上記の雛形が動くとこまで進めます。
node.jsが動く環境があれば、あとはsetup.shを実行すれば問題ありません。

wget https://github.com/vvakame/typescript-project-sample/archive/master.zip
unzip master
cd typescript-project-sample-master
./setup.sh

CryptoJS導入

雛形が動くところまで確認できた段階で、
クライアント側のTSDの設定ファイルにCryptJsを導入します。

tsd query cryptojs -r -o -s -a install --config ./tsd-client.json

このままではCryptoJSの実体があるわけではないので、CryptoJSのインストールを行います。

bower install cryptojslib --save

テスト用にCryptoJSを配置するため、bower.jsonに一部追記します。

bower.json

  "exportsOverride": {
    "jquery": {
      "main-js": "dist/jquery.js"
    },
    "es5-shim": {
      "main-js": "es5-shim.js"
    },
    "cryptojslib": {
      "test-js": "**/*.js"
    },
    "mocha": {
      "test-js": "*.js",
      "test-css": "*.css"
    },
    "expectations": {
      "test-js": "expectations.js"
    }
  }

セットアップ用のコマンドを実行します。

grunt setup

cryptJSlib内にあるjsファイルがbower-task/test-js/cliptjslib内にコピーされます。

テスト実行時にこのディレクトリにあるファイルをすべてコピーするのですが、
minifyされたファイル群でエラーが発生してしまうため、
minifyされたファイルはコピーされないようにGruntfileに対して設定します。

Gruntfile.js

copy: {
    bower: {
        files: [{
            expand: true,
            flatten: true,
            cwd: 'bower-task/',
            src: ['main-js/**/*.js'],
            dest: '<%= opt.client.jsLib %>/'
        }, {
            expand: true,
            flatten: true,
            cwd: 'bower-task/',
            src: ['test-js/**/*.js', 'test-css/**/*.css'],
            filter: function(filepath) {
                return (filepath.indexOf('-min.js') === -1);
            },
            dest: '<%= opt.client.tsTest %>/libs/'
        }]
    },
    app: {
        files: {
            'app.js': '<%= opt.server.jsMainOut %>/app.js'
        }
    }
},

実装

テスト対象のTypeScriptとそのテストコードを書いていきます。

client/script.crypto.ts

/// <reference path="libs/typing/cryptojs/cryptojs.d.ts" />

module CryptStudy{
    export class Crypt{
        getCrypt(): string {
            var ret = CryptoJS.HmacSHA1('AAA','BBB').toString(CryptoJS.enc.Base64);
            return ret;
        }
    }
}

client-test/MainSpec.ts

///<reference path='../client/scripts/libs/typing/jasmine/jasmine.d.ts' />
///<reference path='../client/scripts/crypto.ts' />

module Test {
    describe("暗号化テスト", () = > {
        it("暗号化できること", () = > {
            var getCrypt: CryptStudy.Crypt = new CryptStudy.Crypt();
            var ans = '40GaGt7Yhk+Plhsj8OerrvqXWV4=';
            expect(getCrypt.getCrypt()).toEqual(ans);
        });
    });
}

テストを実施します。

grunt test

Cleaning app.js...OK
Cleaning server/app.js...OK
Cleaning server-test/api-spec.js...OK
Cleaning client/scripts/main.js...OK

(中略)

Running "karma:all" (karma) task
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket o0YauXAk0115zhbAGBQb with id 78492293
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket LEqwxrPLkhNFp3gxGBQc with id 47516734
PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.01 secs / 0.002 secs)
PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.01 secs / 0.002 secs)
PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0 secs / 0.003 secs)
PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.006 secs / 0.002 secs)
TOTAL: 3 SUCCESS

Done, without errors.

最後に

TypeScriptを使うにあたり、既存のJavaScriptのライブラリをどのように使うのかが、
気になったので調べてみました。