Escribiendo Componentes en Typescript

Configuración del Paquete 

Ya sea que estés trabajando en una librería de TypeScript o directamente con un proyecto de Wonderland Engine, la configuración será la misma.

Necesitarás instalar el compilador de typescript usando tu gestor de paquetes favorito (npm, yarn, etc…):

npm i typescript --save-dev

Crea un nuevo archivo de configuración llamado tsconfig.json en el directorio raíz de tu proyecto/librería:

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

Wonderland Engine utiliza características modernas de JavaScript y TypeScript, tales como:

• Campo Exports en package.json
• Decoradores de TypeScript

Algunas de esas características requieren claves específicas en tu configuración, como:

• “moduleResolution”: Permite importar desde la API usando el campo “exports” del paquete.
• “experimentalDecorators”: Te permite usar decoradores. Consulta la sección de Decoradores para más información.

Para más detalles sobre la configuración, por favor revisa la documentación de TypeScript.

Soporte del Editor 

El editor ofrece soporte de primera clase para Esbuild, un bundler popular de JavaScript y TypeScript. Esbuild es capaz de transpilar directamente tus fuentes .ts a archivos .js.

Antes de escribir tu primer componente, abre Vistas > Configuración del Proyecto. Entonces, el panel aparecerá a la derecha. Actualiza la opción Configuración del Proyecto > Scripting > entryPoint de js/index.js a js/index.ts.

La configuración que buscas se destaca aquí en rojo:

Ahora puedes comenzar a escribir tus componentes usando las extensiones .ts.

Decoradores 

Con TypeScript, crear propiedades usando la exportación Property lleva a la repetición de código:

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

Cada propiedad debe aparecer dos veces, una para la declaración del tipo y otra para la definición. Los decoradores vienen a ayudar:

import {Component} from '@wonderlandengine/api';
/* Nota el '.js' al final de la declaración de importación. */
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;
}

En lugar de usar el operador de aserción no nulo en la clase, también puedes usar valores ficticios:

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

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

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

En el ejemplo anterior, nota la ausencia de ! al definir myFloat o myBool.