Solving warning: “Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option in your ‘tsconfig’ or ‘jsconfig’ to remove this warning”

This article describes how to solve this warning that could be shown after use “decorators” in TypeScript.

WHAT IS A DECORATOR

A “decorator” is a special kind of declaration which its expression is evaluated during runtime and it can be attached to a class, method accessor, property, or parameter.

Using the exact TypeScript definition:

Click to go to the official page

This functionality is available only in TypeScript but there is a proposal to add it to JavaScript. Until the date of this article, the proposal is on stage 2 as you can see clicking here.

WARNING AND HOW TO SOLVE IT

Please have a look on the warning as shown below in order to confirm if it is your problem.

Warning: TypeScript — experimentalDecorators

Once you have confirmed, this warning can easily solved checking:

• If you opened your project from the root folder. It’s mean that all you should do is close your VS Code, for instance, and open it again using the root folder. It is plain to see it if the file explorer shows the files tsconfig.json, package.json, tslint.json and package-lock.json.

Visual Studio Code — Root files

• If the case above was not your case, so check if the properties “outDir”, “rootDir”, and “experimentalDecorators” are correctly defined in “tsconfig.json” file. Please see the example that follows:

{
  "compilerOptions": {
    "outDir": "./dist" 
    "rootDir": "./src" 
    /* Experimental Options */
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true, 
    /* Advanced Options */
    "forceConsistentCasingInFileNames": true 
  }
}

One case or another will remove the warning.

WHAT DOES EACH PROPERTY DO?

• “outDir”: Basically where the builded files will be placed. Probably before they go to production environment.
• “rootDir”: You should fill this out with the project root folder. This is where you are editing your project.
• “experimentalDecorators”: The property responsible for allow (or not allow) “decorators” usage on the code.