Type of Generic Stateless Component React? OR Extending generic function interface in typescript to have a further generic?

Question

You can’t use generics like this:

const myCom: <T>SFC<Prop<T>> = <T>(props: Prop<T>)=> <div>test</div>

The TypeScript spec states:

A construct of the form
< T > ( ... ) => { ... }
could be parsed as an arrow function expression with a type parameter or a type assertion applied to an arrow function with no type parameter.

source; Microsoft/TypeScript spec.md

Your declaration doesn’t match the pattern defined in the TypeScript spec, therefore it wont work.

You can however don’t use the SFC interface and just declare it yourself.

interface Prop<V> {
    num: V;
}

// normal function
function Abc<T extends string | number>(props: Prop<T>): React.ReactElement<Prop<T>> {
    return <div />;
}

// const lambda function
const Abc: <T extends string | number>(p: Prop<T>) => React.ReactElement<Prop<T>> = (props) => {
   return <div />
};

export default function App() {
    return (
        <React.Fragment>
            <Abc<number> num={1} />
            <Abc<string> num="abc" />
            <Abc<string> num={1} /> // string expected but was number
        </React.Fragment>
    );
}

Leave a Comment Cancel reply