Writing Components in Typescript
Whether you are working on a TypeScript library or directly with a Wonderland Engine project, the setup will be the same.
You will need to install the typescript compiler using your favorite package manager (
Create a new configuration file called
tsconfig.json at the root of your project/library:
- Exports field in package.json
- TypeScript Decorators
Some of those features require specific keys to be set in your configuration, such as:
- “moduleResolution”: Allows to import from the API using the package “exports” field.
- “experimentalDecorators”: Allows you to use decorators. See the Decorators section for more information.
For more information about the configuration, please have a look at the TypeScript documentation.
Esbuild is able to directly transpile your
.ts sources into
Before writing your first component, open
Views > Project Settings. The panel will then appear on the right.
Project Settings > Scripting > entryPoint option from
The setting you are looking for is highlighted here in red:
You can now start writing your components using the
With TypeScript, creating properties using the
Property export leads to code repetition:
Each property must appear twice, once for the type declaration, and once for the definition. Decorators are here to help:
Instead of using the non-null assertion operator in the class, you can also use dummy values:
On the above example, note the missing
! when defining