Typescript: Error Importing ES6 Class Extending React.Component into TSX

[alecmerdler]

Encountering errors using both tsc and webpack when importing ES6 classes that extend React.Component into TSX. Entry file is app.jsx.

Compiler outputs working code, and current solution is adding ignoreDiagnostics: [2605, 2607] to ts-loader options in Webpack config.

TypeScript Version: 2.4.2
ts-loader Version: 2.3.4

Code
https://github.com/alecmerdler/tsx-jsx

Expected behavior:

• tsc with no errors
• webpack with no errors

Actual behavior:

• error TS2339: Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Hello> & Readonly<{ children?: ReactNode; }> & Rea...'.
• error TS2607: JSX element class does not support attributes because it does not have a 'props' property.

[mhegazy]

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 {}.

[alecmerdler]

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.

[mhegazy]

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 {
...
}

[alecmerdler]

I've updated the repo with @augments, but I am still getting the same errors.

[mhegazy]

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

[alecmerdler]

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>}.