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):

https://i.sstatic.net/l3VSr.png

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 №3

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

https://i.sstatic.net/bfnwq.png

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

What are the limitations of jest and jsdom in supporting contenteditable features?

I am facing an issue with a particular test case: test('get html element content editable value', () => { // arrange const id = 'foo'; document.body.innerHTML = `<div id='${id}' contenteditable="true">1</div ...

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

An issue occurred when attempting to use the Mailgun REST API from an Angular 6 application. The error message states that the 'from' parameter is missing

I am encountering an error that states the 'from' parameter is missing in the body. Can you help me troubleshoot why this issue is happening? export class EmailService { constructor(private http: HttpClient) {} sendMailgunMessage() { const opti ...

Issues with loading Angular 4 Bootstrap JS post compiling

Utilizing normal bootstrap 3 within an Angular 4 application has been working well when compiling for development using ng serve. However, upon building the application with ng build, I encounter an issue where my bootstrap.js fails to load. Below are th ...

Guide on incorporating finos/perspective into an Angular 8 project using https://perspective.finos.org/

I am looking for guidance on incorporating Finos/Perspective Datagrid into my Angular 8 application. I need to input data in JSON format and have it output as a Datagrid. Any sample code or examples would be greatly appreciated. You can find the GitHub re ...

"What is the best way to add content to the end of the last child element using Angular's

Currently, I am facing an issue with appending a button after an input field using an Angular7 directive. The problem lies in the fact that the Renderer2 method appendChild is placing the button before the input field. Button appearing before the input fi ...

Are there specific files or classes that store constants for different keyboard events?

When working in Angular, I often bind data with a host listener using code similar to the example below: @HostListener('window:keyup', ['$event']) onKeyUp(event: KeyboardEvent) { if (event.keyCode === 13) { this.onEnterClicked(ev ...

New Entry failing to appear in table after new record is inserted in CRUD Angular application

Working with Angular 13, I developed a basic CRUD application for managing employee data. Upon submitting new information, the createEmployee() service is executed and the data is displayed in the console. However, sometimes the newly created entry does no ...

Enhancing Luxon DateTime with extension type support

Referencing the issue at https://github.com/moment/luxon/issues/260, I am looking to extend the DateTime object as shown below: import { DateTime } from 'luxon'; function fromUnix(tsp?: number): DateTime { return DateTime.fromMillis(tsp * 1000 ...

How can this be happening? It's expected that items will be printed, but for some reason

I'm struggling to figure out why the console.logs aren't showing up. import { GenericRepository, getGenericRepository } from '../src/database/repository/GenericRepository'; import { start, stop } from '../src/index'; import r ...

Maintaining security and privacy with Angular 5: Ensure localStorage is cleared when the browser

In my web application using Angular 5, I have a requirement to clear the localStorage objects whenever the user closes the browser window. @HostListener("window:beforeunload", ["$event"]) clearLocalStorage(event) { localStorage.clear(); console.lo ...

Utilizing Provide/Inject in Vue 3 Typescript to retrieve a method within a component, encountering the possibility of an 'undefined' Error Object

Having trouble calling the loginWithRedirect function within the header.vue component using inject feature in Vue 3 and Typescript. ERROR in src/components/global/HeaderMenu.vue:77:17 TS2339: Property 'loginWithRedirect' does not exist on type ...

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Explore the sandbox environment here: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206. import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: ...

Angular Reactive Forms provide a method to connect a data object with each element within a FormArray

Currently, I am in the process of constructing a reactive form that resembles the image depicted below - In the image, each file (referred to as an attachment in the code) contains multiple agendas. These agendas can be added, updated, and deleted. bui ...

Definition file for Typescript Angular 1.5 component

Encountering a problem with typescript and angular 1.5 - when building, an error pops up saying error TS2339: Property 'component' does not exist on type 'IModule'.. Could it be that I overlooked a definition file containing this proper ...

Issue encountered while attempting to download a file using DRF with Angular integration

My current project involves using DRF and Angular. I have successfully implemented a file download feature on localhost with the following code: @action(methods=['get'], detail=True) def download(self, *args, **kwargs): instance = self.get_o ...

Utilizing Jest and nest.js for testing with absolute paths

Looking at my jest configuration inside the package.json: "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "moduleDirectories":["node_modules", "src" ...

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

I had a component that I needed to add to Storybook. It was working fine, but the styling was slightly off. I managed to resolve this by adding inline styling with position: absolute. Here is how it looks now: const Template: any = (args: any): any => ( ...

Discovering the world of Promises in TypeScript and understanding how to return specific types

Transitioning from coding in Clojure for the past two years to TypeScript has been an interesting journey. However, I've hit a bit of a roadblock today. The issue lies with my interface: interface ICustomer { id: number, first_name: string } I ...

Effective ways to request verification prior to eliminating an item with ng-select (multi-select)

https://i.stack.imgur.com/HDtXq.jpg Is it possible to add a confirmation prompt when deleting an item from a select component? I couldn't find any specific prop for the component. Is there any way to customize or override the delete function? ...