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