Typing issue with React Higher-Order-Components (JSX elements attributes type 'T' must be an object type)

[frankwallis]

I am having an issue trying to get the right typings flowing through when creating higher order components in React. Consider the following:

import * as React from 'react';
import {Component, ComponentClass, Props} from 'react';

/* higher-order component */
export interface HighlightedProps {
    isHighlighted?: boolean;
}

export function Highlighted<T>(InputTemplate: ComponentClass<T>): ComponentClass<T & HighlightedProps> {
    return class extends Component<T & HighlightedProps, void> {
        constructor(props) {
            super(props);
        }

        render() {
            let className = this.props.isHighlighted ? "highlighted" : "";
            return (
                <div className={className}>
                    <InputTemplate {...this.props}/>
                </div>
            );
        }
    }
}

/* some basic components */
interface MyInputProps {
    inputValue: string;
}
class MyInput extends Component<MyInputProps, void> { };

interface MyLinkProps {
    linkAddress: string;
}
class MyLink extends Component<MyLinkProps, void> { };

/* wrapped components */
const HighlightedInput = Highlighted(MyInput);
const HighlightedLink = Highlighted(MyLink);

/* usage example */
export class Form extends Component<any, void> {
    render() {
        return (
            <div>
                <HighlightedInput inputValue={"inputValue"} isHighlighted={false} />
                <HighlightedLink linkAddress={"/home"} isHighlighted={true} />
            </div>
        );
    }
}

But this errors with JSX elements attributes type 'T' must be an object type. Is this an issue or am I doing something wrong here?

This may also be related to #4362, but I am unsure if it is exactly the same issue or not.

Any help would be much appreciated, thanks.

[tejacques]

I believe this is fixed with #4362:

Using your exact input as src/HOC.tsx

$ tsc --version
message TS6029: Version 1.7.5
$ tsc src/HOC.tsx typings/react/react.d.ts --jsx preserve --module commonjs
src/HOC.tsx(19,22): error TS2600: JSX element attributes type 'T' must be an object type.
src/HOC.tsx(46,18): error TS2600: JSX element attributes type 'MyInputProps & HighlightedProps' must be an object type.
src/HOC.tsx(47,18): error TS2600: JSX element attributes type 'MyLinkProps & HighlightedProps' must be an object type.

$ ./node_modules/.bin/tsc --version
Version 1.8.0-dev.20160106
$ ./node_modules/.bin/tsc src/HOC.tsx typings/react/react.d.ts --jsx preserve --module commonjs

[frankwallis]

that's great news, thanks for the update