Typescript FunctionComponent

Hi, maybe I’m missing something but here is the situation. I have a functional component with this signature:

const Input : FunctionComponent<Props> = (props: Props)

Then using Storybook for Preact I have the following story

storiesOf('Input', module)
    .add('Sample', () => <Input type="text" />)

And in this situation I get a typescript validation error with the following message at the story level. JSX element type 'VNode<{}>' is not a constructor function for JSX elements. Type 'VNode<{}>' is missing the following properties from type 'Element': nodeName, attributes, children

So I add method is expecting a RenderFunction which is an alias to one or more Preact.AnyComponent or JSX.Element.

Then I checked the FunctionComponent and it return a function that returns VNode or null.

So I checked and JSX.Element extends VNode<any> so this should be correct. But doesn’t work.

If on index.d.ts I changed the interface

interface FunctionComponent<P = {}> {
    (props: RenderableProps<P>, context?: any): VNode | null;
    displayName?: string;
    defaultProps?: Partial<P>;
}

To

interface FunctionComponent<P = {}> {
    (props: RenderableProps<P>, context?: any): preact.JSX.Element | null;
    displayName?: string;
    defaultProps?: Partial<P>;
}

Then the error gets solved but I’m not sure this is correct or if I’m doing something wrong. Btw I’m using the latest release of preact

[gianpaj]

For others arriving here for a similar issue.

This fails:

const Avatar = (props: IProps): FunctionalComponent<IProps> => {

  return (
    <span>
     hello
    </span>
  );
};
export default Avatar;

Error in the return:

Type 'Element' is not assignable to type 'FunctionalComponent<IProps>'.
  Type 'Element' provides no match for the signature '(props: Readonly<IProps & Attributes & { children?: ComponentChildren; ref?: RefObject<any> | RefCallback<any> | undefined; }>, context?: any): VNode<...> | null'.

and error when using this component:

'Avatar' cannot be used as a JSX component.
  Its return type 'FunctionalComponent<IProps>' is not a valid JSX element.ts(2786)

This is correct:

const Avatar: FunctionalComponent<IProps> = (props: IProps) => {

  return (
    <span>
     hello
    </span>
  );
};
export default Avatar;

the component should be a FunctionalComponent. It doesn’t return one

[ForsakenHarmony]

Have you configured jsxFactory?