Cocos CreatorとTypeScriptの基本的な文法

JavaScriptはそのままでもTypeScriptに書けるので、ここにあるのは純粋のTypeScriptのトピックスとは言えませんが、ひとまずCocos Creatorにおいてよく使いそうなものをまとめてみました。

名前末尾の文字を数字に変換

末尾の一文字を取得

buttonName.charAt(buttonName.length - 1)

stringをnumberに変換

文字列の前に「+」をつけるだけです。

+'3'

上記の2つ合わせて例えばボタンの名前の場合は以下にすれば良いでしょう。

let buttonName = button.node.name;
let num = +buttonName.charAt(buttonName.length - 1);

クラスの読み込み

import CustomButton from "./CustomButton";

または、

import * as Encrypt from '../Library/encryptjs';

必要に応じてfrom直後のパスを変えるといいでしょう。
クラスファイルの拡張子は不要です。

クラス判定

インスタンスはどのクラスに所属しているかと確認したい時:

mySprite instanceof Sprite;

参考1ActiveScriptと似たような問題が存在するため、現時点非推奨だそうです。

いろいろなプロパティ宣言

export default class TestMe extends cc.Component {

    readonly MAX_LEVEL = 100; // 定数の宣言

    @property(cc.Label) // コンポーネントの宣言
    label: cc.Label = null;

    @property // 値の宣言
    text: string = 'hello';

    @property([cc.Button]) // 配列の宣言
    myButtons: cc.Button[] = [];

    @property // プライベート変数の宣言
    _cooker: cc.Node = null;
}

コールバック

関数宣言と受け渡し

func1() {
    let callback = (): void => {
        cc.log("callback");
    }
    this.func2(callback);
}

func2(callback: () => any) {
    callback();
}

パラメーターがある場合はこうなります。

func1() {
    let callback = (sender: cc.Node): void => {
        cc.log("callback");
    }
    this.func2(callback);
}

func2(callback: (sender: cc.Node) => any) {
    // 何かの処理
    callback();
}

もちろんcallback変数分けずに、一行で書くこともできます。

さらにC++のtypedefのような書き方もできるようです。

type NumberCallback = (n: number) => any;

class Foo {
// Equivalent
save(callback: NumberCallback) : void {
callback(42);
}
}

C++ならこんなん感じのコールバック宣言になるでしょうか。

    typedef std::function<void(float value)> NumberCallback;

文字列のフォーマット

フォーマット

let a = "hello";
let b = "world";
let str = `${a}_${b}`;
// strが「hello_world」になるはずです

これ以外にも「+」で連結できますが、上記の方法のほうがStringUtils::formatに似てますね。

数字指定桁数の表示

例えば月や時間を全部2桁で表示した場合です。
下記は参考6のJavaScriptフォーラムの回答ですが、その書き方がなんとなくかっこよく感じました。^^;

var myNumber = 7;
var formattedNumber = (“0” + myNumber).slice(-2);

もちろんTypeScriptでも問題ありませんでした。

ちなみに、小数点以降数字の指定桁数表示はnum.toFixed(桁数)です。
詳しくは参考7を参考するといいでしょう。

参考
  1. Class type check with TypeScript
  2. Unary plus (+)
  3. TypeScript 2.0: Read-Only Properties
  4. Use TypeScript
  5. Are strongly-typed functions as parameters possible in TypeScript?
  6. How to format numbers by prepending 0 to single-digit numbers?
  7. TypeScript – Number toFixed()