The latest update of WebStorm in 2016.3 has brought to light an error related to the experimental support for decorators, which may undergo changes in forthcoming

Hello, I recently updated to the latest WebStorm version and encountered this error message:

Error:(52, 14) TS1219:Experimental support for decorators 
is a feature that is subject to change in a future release. 
Set the 'experimentalDecorators' option to remove this warning.

Oddly enough, the experimentalDecorators setting in my tsConfig file is already set to true:

{
  "version": "1.5.0",
  "compilerOptions": {
    //...,
    "experimentalDecorators": true,   // <======== HERE
    //...,
  },
  "files": [
    //...
  ],
  "exclude": [ "node_modules" ]
}

Answer №1

WS2016.3 will only apply configuration settings to a file if it is included in the 'files' or 'include' section of the tsconfig.json. [For more information on tsconfig.json, click here.]

Therefore, it is important for the config to encompass all project files (or have multiple tsconfig.json files for different parts of the application). Otherwise, the TypeScript service will default to using standard TypeScript options for the file.

Recommended Solution

Your tsconfig.json should look like this:

{
  "version": "1.5.0",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true, 
    "sourceMap": true,
    "listFiles": true,
    "isolatedModules": false,
    "moduleResolution": "node",
    "suppressImplicitAnyIndexErrors": true
  },
  "include": [
    "typings/thera/thera.d.ts",
    "typings/browser.d.ts",
    "typings/main.d.ts",
    "typings/meteor.d.ts",
    "typings/meteor_server.d.ts",
    "your_app_directory/**/*" 
  ],
  "exclude": [ "node_modules" ],
  "compileOnSave":false //not required but is suggested for meteor projects
}

Alternative Solution

You can set default options in the TypeScript settings (track changes option must be unchecked if you do not want automatic compilation):

Important Note: If you are not satisfied with the new behavior, you can turn off TypeScript service integration by going to "File | Settings | Languages & Frameworks | TypeScript" -> "Use TypeScript service".

Answer №2

I can confirm that this solution also works in WebStorm version 2020.1.2. Thank you for sharing!

Answer №3

  1. Go to File -> Settings -> Languages & Frameworks -> Typescript
  2. Add
    --experimentalDecorators --moduleResolution mode
    to the Options input

Click on the apply button located at the bottom right corner

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting event properties in a React component using the rest operator: A comprehensive guide

Can someone please assist me? I am new to TypeScript and struggling with how to use event props in my component. I have defined two props and need all my events as rest props. I encountered an error when trying to use my component with onClick event. The ...

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-color); opacity: 1; } I am a beginner in hybrid app development and ...

Using Typescript generics to create parameter and argument flexibility for both classes and

I'm facing an issue where I need to effectively chain multiple function calls and ensure that TypeScript verifies the correctness of their linkage. export class A<T, K> { public foo(a: A<K, T>): A<K, T> { return a; } } cons ...

Tips for sorting through the properties of the Record<K, T>:

Let's say we have the following data stored in a record: export const MenuData: Record<Header, HeaderInfo> = { val1: { message: 'xyz', buttonText: 'txt', buttonUrl: '/url-abc', }, val2: { messa ...

What is the best way to restrict the suggested values in a property depending on the value of another property?

I'm working on creating a third interface that depends on the value of properties from two other interfaces, while also introducing a unique third property. I've chosen not to extend the third property from the first two interfaces as it may not ...

It appears that protractor-flake is programmed to re-run all tests instead of just the ones that have failed

Running tests using the latest version of "[email protected]", encountering failures during testing but the tests are rerunning again. No custom reporter used except Allure reporting. Below is the command used for running: protractor-flake --max-at ...

Utilizing TypeScript to Retrieve the Parameter Types of a Method within a Composition Class

Greetings to the TS community! Let's delve into a fascinating problem. Envision having a composition interface structured like this: type IWorker = { serviceTask: IServiceTask, serviceSomethingElse: IServiceColorPicker } type IServiceTask = { ...

What is the best way to bring in an array from a local file for utilization in a Vue 3 TypeScript project?

Encountering a TS7016 error 'Could not find a declaration file for module '../composables/httpResponses'. '/Users/username/project/src/composables/httpResponses.js' implicitly has an 'any' type.' while attempting to ...

What are the steps to reduce the node version?

How can I downgrade my npm version from 16.13.1 to 12.0.1? Any guidance would be greatly appreciated! Thank you in advance. ...

The Angular 2 error message states that the type 'Observable<{}>' is not compatible with the assigned type

Observable is having trouble being assigned, my package.json file contains "angular2": "2.0.0-beta.17", "systemjs": "0.19.24", "es6-promise": "^3.0.2", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12" The is ...

Comparing Angular 5 with --aot and Angular 5 with --aot=false configuration settings

I am having an issue with my Angular application using Angular 5.0.0 and rxjs ^5.5.2. When I run the command ng serve --aot=false, everything works fine. However, when I use ng serve --aot, I encounter the following error: core.js:1350 ERROR Error: Uncaug ...

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

What could be causing my component to not refresh when used as a child?

I have been experimenting with some code to track rerenders. The initial approach failed when passing <MyComponent> as a child component. it("should return the same object after parent component rerenders", async () => { jest.useF ...

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Is there a way to combine two kleisli arrows (functions) f: A -> Promise B and g: B -> Promise C into h: A -> Promise C using the library fp-ts? Having experience with Haskell, I would formulate it as: How can I achieve the equivalent of the > ...

difficulties arise when trying to use ngOnChanges to update an array

My code includes an array that is being updated from another component, with new Strings being added to it using the array.push() method. I have verified this update by testing it with a button, however, ngOnChanges does not seem to detect any change in ...

Using jQuery with Angular 4 allows for powerful front-end development

To include jQuery in an Angular4 project, I follow these steps: npm install --save jquery npm install --save-dev @types/jquery In the app.component.ts file import $ from 'jquery'; or import * as $ from 'jquery'; When running "ng se ...

Creating the upcoming application without @react-google-maps/api is simply not possible

After incorporating a map from the documentation into my component, everything seemed to be functioning correctly in the development version. However, when attempting to build the project, an error arose: Type error: 'GoogleMap' cannot be used as ...

Uh oh! We encountered an error: Uncaught (in promise): Error: No routes found for the provided URL segment

There seems to be an issue with the router in my Angular application. I have successfully deployed it on an Apache server for production, and it is being served from the URL www.domain.com/clientng. Everything works fine, but I encounter an error in the br ...

Angular AutoComplete feature does not accurately filter the list items

I need to implement an auto-complete feature for the county field due to a large number of items in the list causing inconvenience to users who have to scroll extensively. Currently, there are two issues with the code. The first problem is that although t ...

Is there a way to temporarily pause HTTP calls?

Looking for a solution to this problem I'm facing with the code below: while (this.fastaSample.length > 0) { this.datainputService .saveToMongoDB(this.fastaSample.slice(0, batch)) .subscribe(); } The issue is that I can't send all ...