How to fix the ‘Experimental Decorator’ warning in Visual Studio Code when working on React-Native codebase?

Recently, I started to work on a React-Native project which used mobx and firebase. As part of building the Authentication Store that would allow me to authenticate a user against the user data stored in the firebase account, I resolved to using the @observable and @action decorators available in as part of the mobx package. As the title of this article hints, Visual Studio Code was used as the IDE during the development.

When these decorators were used, VSCode displayed a warning as depicted below.

It read,

[js] Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.

1.13.1 was the version of the Visual Studio Code in use.

How do we fix this?

  • Create a file, entitled, tsconfig.json (if not already present) in the root directory of your project folder.

    tsconfig.json represents the ‘TypeScript configuration options’ that VSCode is expected to read and apply when the developer is working on the files related to the project that are stored in the sub-folders within the project folder.

  • Add the below content to tsconfig.json (ref: https://stackoverflow.com/questions/31737677/vscode-is-it-possible-to-supress-experimental-decorator-warnings).
  • {
        "compilerOptions": {
            "experimentalDecorators": true,
            "allowJs": true
        }
    }
    
  • The second option, allowJs: true is important.

  • Shutdown (⌘+q) and restart Visual Studio Code.

There are several other options which can be set in the tsconfig.json that affect the behaviour of Visual Studio Code editor. You can read about them in the docs – https://code.visualstudio.com/docs – search for tsconfig.json.


References:

  1. Getting an error for experimental support for decorators with experimentalDecorators enabled #470
  2. –experimentalDecorators flag seemingly not accepted from tsconfig.json #10084
  3. experimentalDecorators Typescript warning always present #8069
  4. How to remove experimentalDecorators warning in VSCode
  5. VSCode: Is it possible to supress experimental decorator warnings