Asial Blog

Recruit! Asialで一緒に働きませんか?

Monaca IDEではTypeScriptが使えます

カテゴリ :
Monaca
タグ :
JavaScript
TypeScript

Monaca Localkitはローカルに開発環境を構築できるのでCoffeeScriptをはじめ、各種代替言語を使った開発が行えます。しかし、Monaca IDEでも代替言語が使えます。それはTypeScriptです。



TypeScriptで書いてみる



先日書いたMonacaアプリでFacebookログインを使ってみようで使ったjs/app.jsをTypeScriptに書き換えてみます。といっても特に引数を使ったりしていないので簡単です。



元々のJavaScriptは次のようになっています。



  1. var onDeviceReady = function () {
  2.     openFB.init({ appId: '1765109557049137', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken });
  3.     $(".fb-login").on("click", function () {
  4.         openFB.login(function (data) {
  5.             fb_init();
  6.         }, { scope: 'email,read_stream,publish_actions' });
  7.     });
  8.  
  9.     $(".fb-logout").on("click", function () {
  10.         openFB.logout(function () {
  11.             fb_init();
  12.         });
  13.     });
  14.  
  15.     var fb_init = function () {
  16.         openFB.api({
  17.             path: '/me',
  18.             success: function (me) {
  19.                 $(".fb-login").hide();
  20.                 $(".fb-logout").show();
  21.                 $(".profile .name").text(me.last_name + " " + me.first_name);
  22.                 $(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/" + me.id + "/picture?type=small"));
  23.             },
  24.             error: function (err) {
  25.                 $(".fb-logout").hide();
  26.                 $(".fb-login").show();
  27.                 $(".profile .name").empty();
  28.                 $(".profile .image").empty();
  29.             }
  30.         });
  31.     };
  32.     fb_init();
  33. };
  34.  
  35. document.addEventListener("deviceready", onDeviceReady, false);

まず最初にjs/app.tsというファイルを作成します。拡張子で判別しているので必ず .ts という拡張子を使ってください。そしてその中に上記のJavaScriptコードを貼り付けます。



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




TypeScript変換エラー

TypeScript変換エラー



エラーを修正する



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



  1. declare var openFB;
  2. declare var $;

のように書けばエラーが出なくなります。referenceを使う方法もありますが、これは参照先もTypeScriptでないといけないので今回はdeclareを使っています。



localStorageのように元々定義されている変数もありますが、localStorage.accessTokenのようなアクセスはメソッドがないというエラーになります。そこでlocalStorage.getItem(“accessToken”)に置き換えます。これでエラーが消えるはずです。



  1. declare var openFB;
  2. declare var $;
  3.  
  4. var onDeviceReady = function () {
  5.     openFB.init({ appId: '1765109557049137', tokenStore: window.localStorage, accessToken: window.localStorage.getItem("accessToken") });
  6.     $(".fb-login").on("click", function () {
  7.         openFB.login(function (data) {
  8.             fb_init();
  9.         }, { scope: 'email,read_stream,publish_actions' });
  10.     });
  11.  
  12.     $(".fb-logout").on("click", function () {
  13.         openFB.logout(function () {
  14.             fb_init();
  15.         });
  16.     });
  17.  
  18.     var fb_init = function () {
  19.         openFB.api({
  20.             path: '/me',
  21.             success: function (me) {
  22.                 $(".fb-login").hide();
  23.                 $(".fb-logout").show();
  24.                 $(".profile .name").text(me.last_name + " " + me.first_name);
  25.                 $(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/" + me.id + "/picture?type=small"));
  26.             },
  27.             error: function (err) {
  28.                 $(".fb-logout").hide();
  29.                 $(".fb-login").show();
  30.                 $(".profile .name").empty();
  31.                 $(".profile .image").empty();
  32.             }
  33.         });
  34.     };
  35.     fb_init();
  36. };
  37.  
  38. document.addEventListener("deviceready", onDeviceReady, false);

エラーがなければTypeScriptファイルが自動的にコンパイルされて、同じディレクトリにJavaScriptファイル(app.js)が生成されます。HTMLではこのできあがったJavaScriptファイルを読み込めばOKです。







機能の詳細についてはTypeScript - Monacaドキュメントをご覧ください。



TypeScriptは変数の型を決めたり、クラス/モジュール、ラムダ式、Mixinなど多くの機能をJavaScriptに追加してくれます。Monaca IDEではエラーチェックも行いますので、スピーディーかつ高品質なアプリ開発をサポートしてくれるはずです。ぜひご利用ください!