PhpStorm flawlessly detects ES7 type hinting errors

Question

PhpStorm flawlessly detects ES7 type hinting errors

For my project, I have implemented TypeScript. While JavaScript's array includes() function has been valid since ECMA6, setting the lib parameter in tsconfig to "es6" results in a non-fatal error being thrown in the browser console when using the following code:

['alpha', 'beta', 'gamma'].includes('alpha');

The non-fatal error displayed is:

[default] /foo/bar.component.ts:157:28 
Property 'includes' does not exist on type 'string[]'.

To resolve this issue, simply changing the lib parameter in tsconfig to es7 will silence the error in the console, ensuring smooth functionality of the code.

Despite fixing the issue with the version change in the tsconfig, PhpStorm 2016.3.2 continues to show a type hint error with the message:

TS2339: Property 'includes' does not exist on type 'string[]'.

If there is a way to make PhpStorm recognize that the use of includes() is valid, that would be greatly appreciated.

javascript typescript phpstorm

Answer 1

Answer №1

I'm uncertain of the reason behind PhpStorm's behavior, but there is an alternative solution that eliminates the need to utilize the es7 lib.

You can implement this definition as a polyfill:

interface Array<T> {
    includes(item: T, fromIndex?: number): boolean;
}

If your environment supports this method, you are all set.
If you are working with a module system, you will have to follow these steps:

declare "global" {
    interface Array<T> {
        includes(item: T, fromIndex?: number): boolean;
    }
}

Update

To make use of the global augmentation, place the declare "global" { ... } in a file - let's name it: polyfills.ts. Make sure to include a dummy export so that the compiler treats it as a module, like this:

export {};
declare "global" {
    ...
}

Then, wherever needed, simply import it like this:

import "./polyfills";

And you should be good to go.

Answer 2

I'm uncertain of the reason behind PhpStorm's behavior, but there is an alternative solution that eliminates the need to utilize the es7 lib.

You can implement this definition as a polyfill:

interface Array<T> {
    includes(item: T, fromIndex?: number): boolean;
}

If your environment supports this method, you are all set.
If you are working with a module system, you will have to follow these steps:

declare "global" {
    interface Array<T> {
        includes(item: T, fromIndex?: number): boolean;
    }
}

Update

To make use of the global augmentation, place the declare "global" { ... } in a file - let's name it: polyfills.ts. Make sure to include a dummy export so that the compiler treats it as a module, like this:

export {};
declare "global" {
    ...
}

Then, wherever needed, simply import it like this:

import "./polyfills";

And you should be good to go.

Answer 3

Answer №2

Dealing with the PHPStorm issue requires implementing two solutions.

To begin, you should include a new library in PHPStorm's frameworks by navigating to PHPStorm > Preferences > Languages & Frameworks > JavaScript > Libraries and inputting the core-js-DefinitelyTyped library.
If the first solution does not solve the problem, you can follow the modifications suggested by Jane Smith. By maintaining the tsconfig lib value as es7 and adding the provided code snippet to polyfills.ts, it will fix the type hinting errors in PHPStorm effectively.

Answer 4

Dealing with the PHPStorm issue requires implementing two solutions.

To begin, you should include a new library in PHPStorm's frameworks by navigating to PHPStorm > Preferences > Languages & Frameworks > JavaScript > Libraries and inputting the core-js-DefinitelyTyped library.
If the first solution does not solve the problem, you can follow the modifications suggested by Jane Smith. By maintaining the tsconfig lib value as es7 and adding the provided code snippet to polyfills.ts, it will fix the type hinting errors in PHPStorm effectively.

PhpStorm flawlessly detects ES7 type hinting errors

Answer №1

Update

Answer №2

Similar questions

CodeIgniter functionality for generating auto-incrementing IDs that are accessible in both the view and within JavaScript's Window.Print() method

Animate the expansion and shrinkage of a div instantly using jQuery

Creating a custom dynamic favicon and title in NextJS

What is the process of inserting information into a nuxt-link in nuxt.js?

Coming back from retrieving data from an API

Managing simultaneous asynchronous updates to the local state

Erasing a comment creates empty spaces

Traversing through an array and populating a dropdown menu in Angular

Firebase ref.on('value') will repeatedly trigger, even if no changes have occurred

Executing a function in the view/template with Angular 2+

MUI: reveal multiple selection when hovering & prevent dropdown from moving around

Webpack loaders or plugins: understanding the distinction

Adding key/value pairs to an array of objects in RxJS Observables can be easily

Vue.js: The href attribute in a link is different from the data

What are the steps to ensure a form does not trigger the action URL and instead only prints the data upon submission

Can someone guide me on identifying the type of object in React/Typescript?

Create a smooth scrolling effect for a div with a fixed position

The Datalist feature in HTML5 offers an auto-suggest functionality that displays a list of options beginning with the

Refreshing a jsp page without the need to reload the content

Issue with NodeJS SQL Login: Received error (ERR_HTTP_HEADERS_SENT): Headers cannot be set after being sent to the client