Typescript: super keyword strikethrough per erroneous deprecated setting in .js files since Aug 10 update

Created on 11 Sep 2020  路  20Comments  路  Source: microsoft/TypeScript




  • VSCode Version: 1.49.0
  • OS Version: WindowsNT x64 10.0.19041

Steps to Reproduce:

  1. Create a .js file with this content:
import React from 'react'; // does not matter if this line is here or not

class Test  {
    constructor(props) {
        super(props);
    }
}
  1. Add extends React.Component to class Test, like so:
    class Test extends React.Component {

  2. The word 'super' then gets striked through and hovering over seems to say it is deprecated for typescript, but this is not a typescript file. It does not affect the code but is confusing many people. Working around it by disabling the "Editor: Show Deprecated" setting, but would prefer to be able to enable that setting. This has only been happening since the VS Code update on August 10, 2020 (yesterday).


Does this issue occur when all extensions are disabled?: Yes

External

Most helpful comment

I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super();
    }
} 

PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257

All 20 comments

Should the example be?

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super(props);
    }
} 

I confirmed that the React.component constructor is marked as deprecated in the react typings. The deprecated message links to: https://reactjs.org/docs/legacy-context.html

So I suspect this is either: a problem with the react typings or the expected behavior as it points out usage of a deprecated api

Should the example be?

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super(props);
    }
} 

That is in my Step 2, to demonstrate that the issue occurs exactly when you add "extends React.Component" and not just when you use "super" otherwise.

I confirmed that the React.component constructor is marked as deprecated in the react typings. The deprecated message links to: https://reactjs.org/docs/legacy-context.html

So I suspect this is either: a problem with the react typings or the expected behavior as it points out usage of a deprecated api

The legacy-context.html page is referring to a specific React API called Context and is not related to using the extends React.Component syntax. That syntax is required for class components in React and AFAIK is not deprecated, aside from the general move away from class components. The React team themselves have announced that they will _not_ remove class components from React (see: https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy).

See: https://reactjs.org/docs/components-and-props.html. Using extends React.Component is the canonical way to create a React class component. It should not cause the super keyword to be marked as deprecated. Its use along with super(props) is present throughout the React documentation.

Thank you for looking into it!

Thanks. This sounds like it may be an issue with the react typings then. Let's wait for someone on the TS team to confirm this though

Duplicate of #39509 - I filled that one starting with this exact deprecation warning.

Most likely workaround is to split second constructor declaration into two: not deprecated without context argument at all and deprecated with both props and context required.

I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super();
    }
} 

PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257

This is controlled by the definition file on DefinitelyTyped.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L480

Someone should add a third overload here that accepts props: P and isn't marked deprecated

@RyanCavanaugh while fix for declaration is quick workaround here, there is still difference in overloads pick between JS and TS (this exact issue is not observed in TS files) as shown examples for #39509

I found this today after experiencing the same issue. However now I came across the same issue in a regular JavaScript file (no JSX or React) with a valid standard DOM event window.location.reload(true);.

Here is the file where this showed up for window.location.reload:
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/clickUrlAction.js#L75

image

@ConradSollitt I think location.reload is separate issue, because reload doesn't support forceReload flag in latest specs:
https://html.spec.whatwg.org/multipage/history.html#dom-location-reload
https://www.w3.org/TR/html52/browsers.html#dom-location-reload

Related: https://github.com/w3c/ServiceWorker/issues/597#issuecomment-70087324

window.location.reload() works fine

@IllusionMH Thanks for the info! I just did some testing in different browsers and confirmed that for modern browsers the forceReload flag has no effect however when using IE 11 reload(true) results in the browser sending the request header Cache-Control: no-cache. In this past (at least 2 years ago) I had to use reload(true) to make sure app behavior (login pages, etc) worked properly so now I've updated related code comments that the feature is being kept for IE.

I facing the same issue. And it's really confusing, please some team either from react.js or from ts or eslint need to fix this.

This is an issue.
image

I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super();
    }
} 

PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257

Worked like a charm! Thanks

I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super();
    }
} 

PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257

Worked like a charm! Thanks

hey could you please help me out..i didnt get it

I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.

import React from 'react'; 

class Test extends React.Component  {
    constructor(props) {
        super();
    }
} 

PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257

Worked like a charm! Thanks

hey could you please help me out..i didnt get it

This is when u don't need to use this.props inside the constructor, if u wont use, u should be fine removing super(props) and putting only super()

Thanks a lot Minaelee. This truly is a life saver. This issue has been bugging me for a while now

This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

Instead of removing argument from super it's possible to add comment

class Example extends React.Component {
    /** @param {Record<string, any>} props */
    constructor(props) {
        super(props);

        console.log(props.message);
        console.log(this.props.message);
    }
    // ...
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

MartynasZilinskas picture MartynasZilinskas  路  3Comments

zhuravlikjb picture zhuravlikjb  路  3Comments

manekinekko picture manekinekko  路  3Comments

CyrusNajmabadi picture CyrusNajmabadi  路  3Comments

wmaurer picture wmaurer  路  3Comments