Writing Components in Typescript

Typescript provides useful type safety while providing all functionality of JavaScript. Typescript helps developers find coding mistakes quicker and more easily by keeping track of variable types. Developers who work on large codebases, or just want additional assistance like improved code completion, might want to write custom components in Typescript.

As types are check statically during the “transpiling” process, this does not incur any overhead at runtime.

Setting up Typescript 

To install Typescript, you will first need set up an NPM project for your Wonderland Engine project.

Once you have the NPM project set up, you can simply run npm install typescript --save-dev from a terminal at your project’s root folder to install Typescript.

Creating a Typescript Component 

Creating a Typescript component is almost exactly the same as creating a JavaScript component, but with 2 key differences:

The first difference is that the file type is a Typescript (.ts) file. It can be easily created through your code editor. Wonderland Editor does not currently have an option to create Typescript files from the editor itself.

The second difference is that the Typescript needs a reference path to Wonderland Engine’s JavaScript API. This will allow you to use any functions from the WL namespace. The line you need to add to the top of at least one file included in your build is:

1

// <reference path="./../../deploy/wonderland.min.js"/>

Make sure to include your new Typescript component in your main bundle file to be able to use it. You might need to reload your project if you do not see it immediately in Wonderland Editor.

Example 

Provided below is an example Typescript component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// <reference path="./../../deploy/wonderland.min.js"/>

WL.registerComponent('example-typescript-component', {
    param: { type: WL.Type.String, default: 'Example' }
}, {
    init: function() {
        // do stuff here
    },
    start: function() {
        alert(this.param);
    },
    update: function(dt : number) {
        // do stuff here
    }
});