Scrivere Componenti in Typescript

Configurazione del Pacchetto 

Che tu stia lavorando su una libreria TypeScript o direttamente su un progetto Wonderland Engine, la configurazione sarà la stessa.

Dovrai installare il compilatore typescript utilizzando il tuo gestore di pacchetti preferito (npm, yarn, ecc…):

npm i typescript --save-dev

Crea un nuovo file di configurazione chiamato tsconfig.json nella radice del tuo progetto/libreria:

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

Wonderland Engine utilizza caratteristiche moderne di JavaScript e TypeScript, come:

• Il campo Exports in package.json
• Decorator di TypeScript

Alcune di queste funzionalità richiedono che le chiavi specifiche siano impostate nella tua configurazione, come:

• “moduleResolution”: Consente di importare dall’API utilizzando il campo “exports” del pacchetto.
• “experimentalDecorators”: Permette di utilizzare i decoratori. Vedi la sezione Decorators per maggiori informazioni.

Per ulteriori informazioni sulla configurazione, puoi consultare la documentazione di TypeScript.

Supporto dell’Editor 

L’editor ha un supporto di prima classe per Esbuild, un popolare bundler JavaScript e TypeScript. Esbuild è in grado di trascrivere direttamente i tuoi sorgenti .ts in file .js.

Prima di scrivere il tuo primo componente, apri View > Project Settings. Il pannello apparirà quindi sulla destra. Aggiorna l’opzione Project Settings > Scripting > entryPoint da js/index.js a js/index.ts.

L’impostazione che stai cercando è evidenziata qui in rosso:

Ora puoi iniziare a scrivere i tuoi componenti utilizzando le estensioni .ts.

Decoratori 

Con TypeScript, creare proprietà utilizzando l’export Property porta a ripetere il codice:

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

Ogni proprietà deve apparire due volte, una per la dichiarazione del tipo e una per la definizione. I decoratori sono qui per aiutarti:

import {Component} from '@wonderlandengine/api';
/* Nota il '.js' alla fine della dichiarazione di importazione. */
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;
}

Invece di utilizzare l’operatore di asserzione non nulla nella classe, puoi anche usare valori dummy:

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

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

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

Nell’esempio sopra, nota l’assenza di ! quando definisci myFloat o myBool.