Monaca Localkitはローカルに開発環境を構築できるのでCoffeeScriptをはじめ、各種代替言語を使った開発が行えます。しかし、Monaca IDEでも代替言語が使えます。それはTypeScriptです。
TypeScriptで書いてみる
先日書いたMonacaアプリでFacebookログインを使ってみようで使ったjs/app.jsをTypeScriptに書き換えてみます。といっても特に引数を使ったりしていないので簡単です。
元々のJavaScriptは次のようになっています。
var onDeviceReady = function () {
openFB.init({ appId: '1765109557049137', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken });
$(".fb-login").on("click", function () {
openFB.login(function (data) {
fb_init();
}, { scope: 'email,read_stream,publish_actions' });
});
$(".fb-logout").on("click", function () {
openFB.logout(function () {
fb_init();
});
});
var fb_init = function () {
openFB.api({
path: '/me',
success: function (me) {
$(".fb-login").hide();
$(".fb-logout").show();
$(".profile .name").text(me.last_name + " " + me.first_name);
$(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/" + me.id + "/picture?type=small"));
},
error: function (err) {
$(".fb-logout").hide();
$(".fb-login").show();
$(".profile .name").empty();
$(".profile .image").empty();
}
});
};
fb_init();
};
document.addEventListener("deviceready", onDeviceReady, false);
まず最初にjs/app.tsというファイルを作成します。拡張子で判別しているので必ず .ts という拡張子を使ってください。そしてその中に上記のJavaScriptコードを貼り付けます。
そうすると保存したタイミングで自動的にエラーチェックが行われます。最初は多くのエラーが出ているのが分かります。
エラーを修正する
外部ファイルで変数が定義されていないエラーについては、
declare var openFB;
declare var $;
のように書けばエラーが出なくなります。referenceを使う方法もありますが、これは参照先もTypeScriptでないといけないので今回はdeclareを使っています。
localStorageのように元々定義されている変数もありますが、localStorage.accessTokenのようなアクセスはメソッドがないというエラーになります。そこでlocalStorage.getItem(“accessToken”)に置き換えます。これでエラーが消えるはずです。
declare var openFB;
declare var $;
var onDeviceReady = function () {
openFB.init({ appId: '1765109557049137', tokenStore: window.localStorage, accessToken: window.localStorage.getItem("accessToken") });
$(".fb-login").on("click", function () {
openFB.login(function (data) {
fb_init();
}, { scope: 'email,read_stream,publish_actions' });
});
$(".fb-logout").on("click", function () {
openFB.logout(function () {
fb_init();
});
});
var fb_init = function () {
openFB.api({
path: '/me',
success: function (me) {
$(".fb-login").hide();
$(".fb-logout").show();
$(".profile .name").text(me.last_name + " " + me.first_name);
$(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/" + me.id + "/picture?type=small"));
},
error: function (err) {
$(".fb-logout").hide();
$(".fb-login").show();
$(".profile .name").empty();
$(".profile .image").empty();
}
});
};
fb_init();
};
document.addEventListener("deviceready", onDeviceReady, false);
エラーがなければTypeScriptファイルが自動的にコンパイルされて、同じディレクトリにJavaScriptファイル（app.js）が生成されます。HTMLではこのできあがったJavaScriptファイルを読み込めばOKです。
機能の詳細についてはTypeScript - Monacaドキュメントをご覧ください。
TypeScriptは変数の型を決めたり、クラス/モジュール、ラムダ式、Mixinなど多くの機能をJavaScriptに追加してくれます。Monaca IDEではエラーチェックも行いますので、スピーディーかつ高品質なアプリ開発をサポートしてくれるはずです。ぜひご利用ください！