TypeScriptの型定義ファイル(d.ts)をTSDを用いて管理する。
はじめに
TypeScriptからJavascriptのライブラリを使う際に、
型定義ファイルを用いることで、
TypeScriptからライブラリを利用することが可能になります。
メジャーなライブラリの型定義ファイル自体はすでにインターネット上で公開されており、
また、その管理ツールも存在しております。
その管理ツールであるTSDの紹介です。
TSDの導入自体はnpmから導入する事が可能です。
npm install tsd -g
今回は、暗号化のライブラリであるCryptoJSをTSD・Bowerから導入し、
テストから導入した暗号化ライブラリが呼べることを目標とします。
設定手順
TypeScriptの雛形の準備
まずは、以下のGitHubより、TypeScriptの雛形を落とします。
上記の雛形が動くとこまで進めます。
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のライブラリをどのように使うのかが、
気になったので調べてみました。