How to Enable Decorators in TypeScript via Command Line ?

Decorators are a feature of TypeScript that allows you to annotate and modify classes, methods, properties, and parameters at design time. They are used to add metadata or behavior to these entities. To enable decorators, you need to configure TypeScript to use the experimentalDecorators flag.

In this article, we will see how to enable decorators in TypeScript via the command line. We have a few approaches which are listed below:

• Using Inline Command
• Using tsconfig.json Configuration

Approach 1: Inline Command

You can enable decorators by passing the --experimentalDecorators flag directly to the tsc command when compiling your TypeScript files.

tsc --experimentalDecorators your-file.ts

Here, your-file.ts represents the name of your TypeScript file that uses decorators. The --experimentalDecorators flag enables the experimental decorator feature in TypeScript.

Example: Here’s an example of using the inline command to enable decorators in TypeScript via the command line:

Suppose you have a TypeScript file named app.ts with the following code that uses decorators:

Javascript

// Decorator that logs the class
function log(target: any) {
    console.log('Class logged:', target);
}

// Decorator that makes a property read-only
function readonly(target: any, propertyKey: string) {
    Object.defineProperty(target, propertyKey, {
        writable: false });
}

// Decorator that converts the result to uppercase
function uppercase(target: any, propertyKey: string,
    descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function () {
        const result = originalMethod.apply(this);
        if (typeof result === 'string') {
            console.log(result.toUpperCase());
        }
    };
}

@log  // Apply the log decorator to the class
class MyClass {
    // Apply readonly decorator to property
    // declaration,
    @readonly
    property: string;

    constructor(property: string) {
        this.property = property;
    }
    // Apply the uppercase decorator to
    // the printProperty method
    @uppercase
    printProperty() {
        console.log(this.property);
    }
}

const instance = new MyClass('Hello, world!');
instance.printProperty();

To enable decorators, you can use the --experimentalDecorators flag in the command line like this:

tsc --experimentalDecorators app.ts

After running the above command, the TypeScript compiler will compile the app.ts file and generate the corresponding JavaScript file. You can then run the JavaScript file using Node.js:

node app.js

Output:

Class logged: [Function: MyClass]
HELLO, WORLD!

Note: Make sure you have TypeScript installed globally or locally in your project for the tsc command to work, and that you have Node.js installed to execute the generated JavaScript code.

Approach 2: tsconfig.json Configuration

You can also enable decorators by specifying the --experimentalDecorators flag in your tsconfig.json file, which is a configuration file for the TypeScript compiler.

• Create or open your tsconfig.json file.
• Add or modify the "compilerOptions" section to include the "experimentalDecorators" flag with a value of true.

Here’s an example tsconfig.json configuration:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

After updating the tsconfig.json file, you can simply run the tsc command without any additional flags:

tsc your-file.ts

Both of these approaches enable the decorator feature in TypeScript and allow you to use decorators in your code. Make sure to use the approach that suits your project and workflow.

Example: Here’s an example of using a tsconfig.json file to enable decorators in TypeScript:

Create a tsconfig.json file in your project directory with the following configuration:

{
    "compilerOptions": {
        "experimentalDecorators": true
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

In this example, the "experimentalDecorators" option is set to true in the "compilerOptions" section. The "include" property specifies the files to be compiled, and the "exclude" property specifies the folders to be excluded from compilation (e.g., "node_modules" to exclude the Node.js modules folder).

• Save the tsconfig.json file in your project directory.
• Open the command line in the project directory and run the following command to compile the TypeScript code:

tsc

After successful compilation, you can run the resulting JavaScript code using Node.js. For example, if your TypeScript file is named app.ts, you can run:

node app.js

Here’s a code that uses decorators (@log and @uppercase) to enhance a class and its methods:

Javascript

// Decorator that logs the class
function log(target: any) {
    console.log('Class logged:', target);
}

// Decorator that converts the result to uppercase
function uppercase(target: any, propertyKey: string,
    descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function () {
        const result = originalMethod.apply(this);
        if (typeof result === 'string') {
            console.log(result.toUpperCase());
        }
    };
}

@log // Apply the log decorator to the class
class MyClass {
    property: string;

    constructor(property: string) {
        this.property = property;
    }
    // Apply the uppercase decorator to the
    // printProperty method
    @uppercase
    printProperty() {
        console.log(this.property);
    }
}
// Create an instance of MyClass
const instance = new MyClass('Hello, world!');

// Call the printProperty method on the instance
instance.printProperty();

Output:

Class logged: [Function: MyClass]
HELLO, WORLD!

In this example, the tsconfig.json file enables decorators by setting "experimentalDecorators": true in the "compilerOptions" section. The TypeScript compiler (tsc) reads the tsconfig.json file and compiles the app.ts file accordingly. When you run the compiled JavaScript code (node app.js), the decorators are applied, and the expected output is displayed.

Remember to have TypeScript installed globally or locally in your project for the tsc command to work, and Node.js is installed to execute the generated JavaScript code.

Conclusion: Decorators are a powerful feature in TypeScript that allow you to modify or annotate classes, properties, methods, and parameters. Enabling decorators in TypeScript can be done by either using the --experimentalDecorators flag with the tsc command or configure the experimentalDecorators option in tsconfig.json. By enabling decorators, you can leverage their capabilities to enhance the behavior and functionality of your TypeScript code.