JSX type errors with tag of type StatelessComponent<P> (Inferno@6)

[smcatala]

import { StatelessComponent } from 'inferno'

function wrap <P extends { value?: number } = { value?: number}> (
  ChildComponent: StatelessComponent<P>
) {
  return function ParentComponent ({ value }: { value: number }) {
    return (
      <div>
        value: <ChildComponent value={value} />
      </div>
    )
  }
}

errors on <ChildComponent value={value} />:

[ts]
JSX element type 'InfernoNode' is not a constructor function for JSX elements.
  Type 'string' is not assignable to type 'ElementClass'.
[ts] JSX element class does not support attributes because it does not have a 'props' property.

new since Inferno@6

[smcatala]

using ChildComponent: (props: P) => InfernoNode results in the same error [ts] JSX element type 'InfernoNode' is not a constructor function for JSX elements. Type 'string' is not assignable to type 'ElementClass'., whereas ChildComponent: (props: P) => VNode is OK.

replacing InfernoNode with VNode in the .d.ts type definition file for StatelessComponent solves the issue.

interface StatelessComponent<P = Refs<P>> {
    (props: P & Refs<P>, context?: any): VNode;
    defaultProps?: Partial<P>;
    defaultHooks?: Refs<P>;
}

TS/JSX does not seem to accept that InfernoNode may be a string:
declare type InfernoNode = InfernoChild | InfernoFragment | JSX.Element | string | number | boolean | null
any idea why ?

[Havunen]

hmm, I'm not sure. StatelessComponent can return string / boolean / array too. It would be nice to allow them somehow

[Havunen]

Is this still an issue? Should those type changes be updated to Inferno core types? Can you do PR there to see if it works?

[smcatala]

with the latest commit c4662f9 (based on inferno@^7.2, TS@^3.5.3), the above code now generates a new error, maybe linked to TS issue microsoft/TypeScript#28884.
however, since this is not linked to the Inferno type definitions anymore, let's close this one.