TypeScriptでコンポーネントを作成する

パッケージ設定 

TypeScriptライブラリを使用する場合でも、Wonderland Engineプロジェクトで直接作業する場合でも、セットアップは同じです。

お気に入りのパッケージマネージャー（npm、yarnなど）を使用してtypescriptコンパイラをインストールする必要があります：

npm i typescript --save-dev

プロジェクト/ライブラリのルートにtsconfig.jsonという新しい設定ファイルを作成してください：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES6",
    "moduleResolution": "nodenext",
    "experimentalDecorators": true
  }
}

Wonderland Engineは次のような最新のJavaScriptおよびTypeScriptの機能を使用します：

これらの機能の一部は、設定に特定のキーを設定する必要があります：

  • “moduleResolution”: APIから_“exports”_フィールドを使用してインポートを可能にします。
  • “experimentalDecorators”: デコレータを使用できるようにします。詳細はデコレータセクションをご覧ください。

設定に関する詳細な情報は、TypeScriptドキュメントをご参照ください。

エディタサポート 

エディタには、人気のあるJavaScriptおよびTypeScriptバンドラーであるEsbuildの一流のサポートがあります。 Esbuildは、.tsソースを直接.jsファイルにトランスパイルすることができます。

最初のコンポーネントを書く前に、Views > Project Settingsを開いてください。画面右側にパネルが表示されます。 Project Settings > Scripting > entryPointオプションをjs/index.jsからjs/index.tsに更新します。

設定の箇所が赤く強調表示されています：

TypeScriptソースへのエントリーポイントを変更する方法を示すスクリーンショット

これで、.ts拡張子を使ってコンポーネントの作成を始めることができます。

デコレータ 

TypeScriptを使用すると、Propertyエクスポートを使用してプロパティを作成する際にコードの重複が発生します：

import {Component, Property} from '@wonderlandengine/api';

class MyComponent extends MyComponent {
    static TypeName = 'my-component';
    static Properties = {
        myFloat: Property.float(1.0),
        myBool: Property.bool(true),
    };

    myFloat!: number;
    myBool!: boolean;
}

各プロパティは、型宣言と定義の両方に現れる必要があります。デコレータがそれを助けます：

import {Component} from '@wonderlandengine/api';
/* インポート文の最後に'.js'があることに注意。 */
import {property} from '@wonderlandengine/api/decorators.js';

class MyComponent extends MyComponent {
    static TypeName = 'my-component';

    @property.float(1.0)
    myFloat!: number;

    @property.bool(true)
    myBool!: boolean;
}

クラス内でnull非許可アサーションオペレーターを使用する代わりに、ダミー値を使用することもできます：

class MyComponent extends MyComponent {
    static TypeName = 'my-component';

    @property.float(1.0)
    myFloat: number = 1.0;

    @property.bool(true)
    myBool: boolean = true;
}

上記の例では、myFloatやmyBoolを定義する際に!が欠落している点に注意してください。

Switching Scenes Writing JavaScript Libraries