Error Importing ES6 Class Extending React.Component into TSX #18134

Activity

1. mhegazy commented on Aug 30, 2017

   

   Mohamed Hegazy (mhegazy)

   on Aug 30, 2017

   Contributor

   More actions

   React declaration file changed to give props and state a default of {}. and thus they have no properties. the fix here is to change https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L274 to be object instead of {}.
2. Mohamed Hegazy (mhegazy)

   added

   ExternalRelates to another program, environment, or user action which we cannot control.Relates to another program, environment, or user action which we cannot control.

   on Aug 30, 2017
3. alecmerdler commented on Aug 30, 2017

   

   Alec Merdler (alecmerdler)

   on Aug 30, 2017

   Last edited by alecmerdler

   Author

   More actions

   I figured the problem was with @types/react.

   What solutions do you suggest other than modifying the typings? Adding @augments {React.Component<any, any>} doesn't work in this case, but it looks like it worked for others.
4. mhegazy commented on Aug 30, 2017

   

   Mohamed Hegazy (mhegazy)

   on Aug 30, 2017

   Contributor

   More actions

   as a workaround, you can add @augments on your JS React component to give your props a specific type, in here i have used object, but you can use { foo: string, bar: number}.

   /** @augments {React.Component<object, object>} */
   export class Hello extends React.Component {
   ...
   }

   👍React with 👍1Reacted by Sameer Shemna

   🎉React with 🎉4Reacted by Alessandro Mencarini, Mikko Porkola, Sami and Sameer Shemna
5. alecmerdler commented on Aug 30, 2017

   

   Alec Merdler (alecmerdler)

   on Aug 30, 2017

   Author

   More actions

   I've updated the repo with @augments, but I am still getting the same errors.
6. mhegazy commented on Aug 30, 2017

   

   Mohamed Hegazy (mhegazy)

   on Aug 30, 2017

   Last edited by mhegazy

   Contributor

   More actions

   c:\test\18134\tsx-jsx>type app.jsx
   import * as React from 'react';
   import { FooBar } from './index';
   
   const App = (props) => {
     return <FooBar />
   };
   
   c:\test\18134\tsx-jsx>type hello.jsx
   import * as React from 'react';
   
   /** @augments {React.Component<object, object>} */
   export class Hello extends React.Component {
     render() {
       return <div>{this.props.baz}</div>;
     }
   }
   
   c:\test\18134\tsx-jsx>type index.tsx
   import * as React from 'react';
   import { Hello } from './hello';
   
   export const FooBar = (props) => {
     return <Hello baz={null}>
       <div />
     </Hello>;
   };
   
   c:\test\18134\tsx-jsx>type tsconfig.json
   {
     "compilerOptions": {
       "module": "commonjs",
       "target": "es5",
       "jsx": "react",
       "allowJs": true,
       "lib": ["dom", "es2015"],
       "pretty": true,
       "outDir": "dist",
       "sourceMap": true
     },
     "include": [
       "**/*.ts",
       "**/*.tsx",
       "**/*.js",
       "**/*.jsx"
     ],
     "exclude": [
       "node_modules"
     ]
   }
   
   c:\test\18134\tsx-jsx>tsc --v
   Version 2.5.1
   
   c:\test\18134\tsx-jsx>tsc --noEmit
   
   c:\test\18134\tsx-jsx>echo %ERRORLEVEL%
   0
   

   🎉React with 🎉1Reacted by Alessandro Mencarini
7. alecmerdler commented on Aug 31, 2017

   

   Alec Merdler (alecmerdler)

   on Aug 31, 2017

   Author

   More actions

   The issue seems to be with @types/react, removing it (and all packages that have it as a dependency) resolves the error, and ES6 components are imported with type any. I am still not seeing any effect by annotating the ES6 class with @augments {React.Component<any, any>}.
8. Alec Merdler (alecmerdler)

   closed this as completedon Aug 31, 2017
9. microsoft

   locked and limited conversation to collaborators on Jun 14, 2018