Type-hinting functional components?

I’m trying to write a simple function-wrapper around the <button> element.

According to the test-suite:

const ComponentWithChildren: FunctionalComponent<DummerComponentProps> = ({ input, initialInput, children }) => {
	return <div>
		<span>{initialInput}</span>
		<span>{input}</span>
		<span>{children}</span>
	</div>
}

Am I missing something, or why does this approach not work for me at all?

import { h, FunctionalComponent } from "preact";

export interface ButtonProps {
    title: string;
}

export const Button: FunctionalComponent<ButtonProps> = ({ title, children, ...props }) => {
    return <button {...props}>{title}</button>;
};

I get a bunch of errors:

Type '(ButtonProps & ComponentProps<FunctionalComponent<ButtonProps>>) | undefined' has no property 'title' and no string index signature.

Type '(ButtonProps & ComponentProps<FunctionalComponent<ButtonProps>>) | undefined' has no property 'children' and no string index signature.

Type '{ key?: any; ref?: ((el: FunctionalComponent<ButtonProps>) => void) | undefined; }' is not assignable to type 'HTMLAttributes'.
  Types of property 'ref' are incompatible.
    Type '((el: FunctionalComponent<ButtonProps>) => void) | undefined' is not assignable to type '((el?: Element | undefined) => void) | undefined'.
      Type '(el: FunctionalComponent<ButtonProps>) => void' is not assignable to type '((el?: Element | undefined) => void) | undefined'.
        Type '(el: FunctionalComponent<ButtonProps>) => void' is not assignable to type '(el?: Element | undefined) => void'.
          Types of parameters 'el' and 'el' are incompatible.
            Type 'Element | undefined' is not assignable to type 'FunctionalComponent<ButtonProps>'.
              Type 'undefined' is not assignable to type 'FunctionalComponent<ButtonProps>'.

I tried copy/pasting the entire contents of the test, and it gives similar errors.

I looked at the last successful build from 3 days ago, and the tests didn’t look any different.

The most recent change to the types before that was this, I wonder if that broke something?

I’m using Typescript 2.7.2.

[marvinhagemeister]

Had some time to kill and made a PR (#1033)

[mindplay-dk]

Doesn’t seem to help.

import { h, FunctionalComponent, ComponentProps } from "preact";

export interface ButtonProps extends ComponentProps<any> {
    title?: string;
}

export const Button: FunctionalComponent<ButtonProps> = ({ title, children, ...props }) => {
    return <button {...props}>{title || children}</button>;
};

Still gives me errors:

Type '(ButtonProps & ComponentProps<FunctionalComponent<ButtonProps>>) | undefined' has no property 'title and no string index signature.

Type '(ButtonProps & ComponentProps<FunctionalComponent<ButtonProps>>) | undefined' has no property 'children' and no string index signature.

Also, ComponentProps has been flagged as @deprecated in the master version.

I’m afraid the current tsconfig.json isn’t configuring the compiler to strictly check the type-declarations - I just tried building the typescript project with --strict and it’s generating a lot of errors:

mindplay@Sidewinder-7240:/mnt/c/workspace/test/preact$ ./node_modules/.bin/tsc -p test/ts/ --strict
test/ts/hoc-test.tsx(18,2): error TS2322: Type 'typeof (Anonymous class)' is not assignable to type 'ComponentConstructor<T & highlightedProps>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type '(T & highlightedProps) | undefined' is not assignable to type 'T & highlightedProps'.
      Type 'undefined' is not assignable to type 'T & highlightedProps'.
        Type 'undefined' is not assignable to type 'T'.
test/ts/hoc-test.tsx(39,70): error TS2345: Argument of type 'typeof SimpleComponent' is not assignable to parameter of type 'ComponentFactory<SimpleComponentProps>'.
  Type 'typeof SimpleComponent' is not assignable to type 'FunctionalComponent<SimpleComponentProps>'.
    Type 'typeof SimpleComponent' provides no match for the signature '(props: RenderableProps<SimpleComponentProps>, context?: any): VNode<any>'.
test/ts/preact.tsx(32,10): error TS2345: Argument of type '({ input, initialInput }: DummerComponentProps) => Element' is not assignable to parameter of type 'string'.
test/ts/preact.tsx(56,10): error TS2564: Property 'refs' has no initializer and is not definitely assigned in the constructor.

I write all of my own projects in strict mode, and would strongly recommend the same here - the typescript tests aren’t only interesting to prove that the code can works, but also that the typings are strictly correct, which it looks like they’re not.

In my own projects, if a .d.ts fails to compile without warnings, the test has failed.