アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Monaca IDEではTypeScriptが使えます

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コードを貼り付けます。



そうすると保存したタイミングで自動的にエラーチェックが行われます。最初は多くのエラーが出ているのが分かります。





TypeScript変換エラー



エラーを修正する



外部ファイルで変数が定義されていないエラーについては、





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ではエラーチェックも行いますので、スピーディーかつ高品質なアプリ開発をサポートしてくれるはずです。ぜひご利用ください!