Triple slash directive is broken #469

I saw that #469 issue was resolved by #472 and then changed by #482

For some reason I am now getting the error

[ts]
JSX element type 'MyComponent' is not a constructor function for JSX elements.
  Property 'setState' is missing in type 'MyComponent'.
[ts] JSX element class does not support attributes because it does not have a 'props' property.

The generated .d.ts file looks like the following:

declare module '@mycomponents/components' {
    import * as React from 'react';

    export interface MyComponentProps {
        children: React.ReactNode;
    }

    export default class MyComponent extends React.Component<MyComponentProps, any> {
        render(): JSX.Element;
    }
}

If I add

/// <reference types="react" />

Then this solves this issue.

[KnisterPeter]

Thanks, I’ll look into it

[seawatts]

Here is the component before it’s been compiled

// theme.js
import React from "react"
import PropTypes from "prop-types"
import { Provider, Consumer } from "./context"

class Theme extends React.Component {
  static propTypes = {
    tokens: PropTypes.objectOf(PropTypes.string),
    children: PropTypes.element,
  }

  static defaultProps = { tokens: {} }

  render() {
    const { children, tokens } = this.props
    return (
      <Consumer>
        {contextTokens => (
          <Provider value={{ ...contextTokens, ...tokens }}>
            {children}
          </Provider>
        )}
      </Consumer>
    )
  }
}

export default Theme

Here is the output type file

import * as React from 'react';

export interface ThemeProps {
    tokens?: any;
    children?: React.ReactElement<any>;
}

export default class Theme extends React.Component<ThemeProps, any> {
    render(): JSX.Element;
}

Then when trying to consume this library, I get the following error:

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

Type '{ children: Element; tokens: any; }' is not assignable to type '{}'.
  Property 'tokens' does not exist on type '{}'.ts(2322)

I have also tried to change the call to generateFromFile from

generateFromFile(null, `${path}/theme.js`)

to

generateFromFile('@mycomponents/theme', `${path}/theme.js`)

Where the later just wraps the entire file with

declare module '@mycomponents/theme' {
  import * as React from 'react';
  ...
}

Library versions:

Typescript: v3.2.1 react-to-typescript-definitions: v1.2.0 react: v16.6.3 vscode: Code - Insiders edition