Decorators

Basics

Decorators are a future EcmaScript feature that is already available in TypeScript.

Decorators are technically functions that modify an existing class or it’s members. They are called by prefixing them with @:

import {myDecorators, anotherDecorators} from 'example';

@myDecorators
class Foo {
  @anotherDecorator public bar: string;
}

tabris-decorators

Tabris-specific decorators are provided in the optional 'tabris-decorators' extension, which is a separate module from 'tabris'.

:point_right: This extension is TypeScript-only. It will not work in JavaScript/JSX files.

It includes the following decorators:

Setup

When generating a Tabris.js TypeScript project using the Tabris CLI init command an example app may be chosen that already has 'tabris-decorators' installed. The steps below are for manual installation only.

Install the tabris-decorators module itself:

npm install tabris-decorators.

Check your tsconfig.json to ensure the compiler options experimentalDecorators, emitDecoratorMetadata, jsx and jsxFactory options are set as below:

{
  "compilerOptions": {
    "module": "commonjs",
    /* your other options... */
    "jsx": "react",
    "jsxFactory": "JSX.createElement",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

After this you’re good to go.