【Egret Engine】TypeScript の基礎(変数・メソッド・クラス・継承の使い方)

投稿者: | 2018年12月22日

フィア
今回はTypeScriptの簡単な使い方だよ
カレン
JavaScript + Javaって感じだから、

慣れれば使いやすいと思うわ

 

スポンサーリンク

 

目次

 

 

準備

初期のスクリプトでは、Main.ts に何らかの egret 系のクラスがないとエラーになるので、まず初めにegret 用のコードを追加しておきます。

準備で追加するコードは、TypeScript とは無関係なので、無視してください。

 

1、新規Projectの作成

【Egret Wing】新規Projectの作成とエディタの使い方を参考にして、新規Projectを作成してください。

私は「TestProject」という名前で作成しました。

 

2、Main.ts内のコードを初期化

Egret Wing エディタに表示されているTestProject/src/Main.ts をクリック。(表示されてない場合はツールのエクスプローラーをクリック)。

 

Main.ts内のコードを全て削除して、以下のクラスを加えてください。

 

デバッグボタンを押して実行すると、何も表示されていないウィンドウが表示されます。

 

 

 

TypeScriptの変数の宣言方法

1、number 型(整数 / 小数)

 

TypeScript では、

のように宣言します。

 

でデバッグコンソールに実行結果が表示されます。

 

2、string、boolean、anyの型

 

スポンサーリンク

 

TypeScriptのメソッド(関数)の作成方法

 

 

クラスメソッドの使い方

1、public と private 変数の利用方法

 

クラス内で変数を宣言する場合は、「public a :Number = 10;」のように宣言します。

クラス内では let や var はエラーになります。

 

クラスメソッドを使用するときは、

のようにインスタンス化して使用してください。

 

クラス内の public 変数は以下のように使用します。もちろん、private変数は参照できません。

public や private 、thisについては 、UnityのC#ですがこちらの記事もご覧ください。

グローバル変数とローカル変数の違い

 

 

2、クラス外とメソッド内の変数の使用方法

クラス内では public を使用しましたが、

クラス外メソッド内では letvar を使って宣言してください。

ここは非常に間違いやすい点なので注意です!

 

クラス内のグローバル変数ではthisを使って参照しましたが、クラス外の変数を使用したいときは、this は使いません。

 

また、メソッド内ではローカル変数の値が優先して参照されます。

 

なお、let と var の違いについてはこちらの記事が参考になると思います。

letとvarの違い

 

スポンサーリンク

 

3、クラス内でメソッドを使用する方法

クラス内の別のメソッドを使用するときは、

のように「this」を使って宣言してください。

 

4、即時関数の使用方法

functionは 「Method2();」のように、呼び出さないと使用できません。

しかし、定義したものをすぐに使用したいときは、毎回呼び出すのが面倒です。

そういったときに「即時関数」を使用します。

 

即時関数の使い方は、

です。これは関数名に名前を付けなくてもよい、「無名関数」も使用使用しています。

functionを()で囲み、すぐにもう一度(); をつけることで実行できます。

 

スポンサーリンク

 

継承

1、親クラスの継承方法とメソッドの使い方

 

継承するときは、

のように宣言し、

のようにインスタンス化して使用します。

 

親クラスの中にある「constructor ()」は、

インスタンス化されたときに実行されるメソッドです。

 

今回インスタンス化したのは子クラスのChildClassですが、

継承しているので、親クラスのメソッドも使用できます。

 

2、super() メソッドの使い方

 

子クラスに constructor と super() メソッドを追加しました。

結果はsuper() メソッドが無かったときと同じです。

 

super () メソッドは親の constructor () を実行します。

ただ、 super () がなくても自動的に実行されています。

super() が効果を発揮するのは、コンストラクタに引数がある場合です。

 

super()は一つ上の親のconstructor()を参照します。

 

まず、「”子供”」の引数が、子クラスのconstructor()に入ります。

 

「super(name);」を通じて、親のconstructorの引数に”子供”が入ります。

これで、「子供です。」が出力されます。

 

 

おわりに

フィア
TypeScriptはいろいろ混ざってて、

ごっちゃになることがあるよね…

カレン
googleもTypeScriotを推してるから、

今後必須になると思う。

しっかり覚えてね!

 

HTML5 Egret Engine入門へ戻る

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください