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'.
This extension is TypeScript-only. It will not work in JavaScript/JSX files.
It includes the following decorators:
- Related to data binding and custom component development:
- Related to dependency injection:
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.
