Написание компонентов на TypeScript

Настройка пакета 

Независимо от того, работаете ли вы с библиотекой TypeScript или непосредственно с проектом Wonderland Engine, настройка будет одинаковой.

Вам нужно установить компилятор typescript с помощью вашего любимого менеджера пакетов (npm, yarn и т. д.):

npm i typescript --save-dev

Создайте новый файл конфигурации с именем tsconfig.json в корне вашего проекта/библиотеки:

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

Wonderland Engine использует современные функции JavaScript и TypeScript, такие как:

• Поле Exports в package.json
• Декораторы TypeScript

Некоторые из этих функций требуют настройки специфических ключей в вашей конфигурации, таких как:

• “moduleResolution”: Позволяет импортировать из API, используя поле “exports” пакета.
• “experimentalDecorators”: Позволяет использовать декораторы. Подробнее в разделе Декораторы.

Для получения дополнительной информации о конфигурации, пожалуйста, обратитесь к документации TypeScript.

Поддержка редакторов 

Редактор обладает полноценной поддержкой Esbuild, популярного инструмента для объединения JavaScript и TypeScript. Esbuild способен непосредственно транспилировать ваши исходники .ts в файлы .js.

Прежде чем писать свой первый компонент, откройте Views > Project Settings. Панель появится справа. Измените параметр Project Settings > Scripting > entryPoint с js/index.js на js/index.ts.

Этот параметр выделен здесь красным:

Теперь вы можете начинать писать свои компоненты, используя расширение .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.