Schreiben von Komponenten in Typescript

Einrichtung der Verpackung 

Ob Du an einer TypeScript-Bibliothek oder direkt mit einem Wonderland Engine-Projekt arbeitest, die Einrichtung ist die gleiche.

Du musst den typescript-Compiler mit Deinem bevorzugten Paketmanager installieren (npm, yarn, etc…):

npm i typescript --save-dev

Erstelle eine neue Konfigurationsdatei namens tsconfig.json im Hauptverzeichnis Deines Projekts/Bibliothek:

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

Die Wonderland Engine verwendet moderne JavaScript- und TypeScript-Features, wie:

• Exports-Feld in package.json
• TypeScript-Decorators

Einige dieser Features erfordern spezifische Schlüssel in der Konfiguration, wie:

• “moduleResolution”: Ermöglicht den Import aus der API unter Verwendung des Paket “exports” Feldes.
• “experimentalDecorators”: Erlaubt die Verwendung von Decorators. Weitere Informationen findest Du im Abschnitt Decorators.

Für weitere Informationen zur Konfiguration solltest Du einen Blick in die TypeScript-Dokumentation werfen.

Editor-Unterstützung 

Der Editor bietet erstklassige Unterstützung für Esbuild, einen beliebten JavaScript- und TypeScript-Bundler. Esbuild kann Deine .ts-Quellen direkt in .js-Dateien umwandeln.

Bevor Du Deine erste Komponente schreibst, öffne Ansichten > Projekteinstellungen. Das Panel erscheint dann auf der rechten Seite. Aktualisiere die Option Projekteinstellungen > Scripting > entryPoint von js/index.js zu js/index.ts.

Die Einstellung, die Du suchst, ist hier rot hervorgehoben:

Du kannst nun beginnen, Deine Komponenten mit der .ts-Erweiterung zu schreiben.

Decorators 

Mit TypeScript führt das Erstellen von Eigenschaften über den Property-Export zu Code-Wiederholungen:

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;
}

Jede Eigenschaft muss zweimal vorkommen, einmal für die Typdeklaration und einmal für die Definition. Decorators helfen dabei:

import {Component} from '@wonderlandengine/api';
/* Beachte das '.js' am Ende der Importanweisung. */
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;
}

Anstelle des Non-Null Assertion Operator in der Klasse kannst Du auch Dummy-Werte verwenden:

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

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

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

In dem obigen Beispiel fehlt das ! bei der Definition von myFloat oder myBool.