この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
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のライブラリをどのように使うのかが、
気になったので調べてみました。