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.jsonfile. - Add or modify the
"compilerOptions"section to include the"experimentalDecorators"flag with a value oftrue.
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.jsonfile 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.
