CODEWITHSUNDEEP
typescripttypescript-generics
zecuria
zecuria

Reputation: 778

Why does a function with generic argument break Typescript inferrance

I have a React Component that extracts and extends the props of a Component passed in via an as={Component} argument. Example below

type ComponentWithAs = <Props>(props: Props & {
  as: React.ComponentType<Props>
}) => any;

let TestWithAs: ComponentWithAs = () => null;

This works as such:

type Props = {
    value: string;
    options: string[];
    genericFunc: (test: string) => void;
};
function Comp(props: Props) { return null };

TestWithAs({
    as: Comp,
    value: "",
    options: [""],
    genericFunc: (test) => {}, // works
})

However when passing generic components that use those generics in functions. It just infers unkown for the generic.

type GenericProps<T> = {
    value: T;
    options: T[];
    genericFunc: (test: T) => void;
};
function GenericComp<T>(props: GenericProps<T>) { return null };

TestWithAs({
    as: GenericComp, // does not infer generic
    value: "",
    options: [""],
    genericFunc: (test: string) => {}, // should work but infer's unkown
})

Playground link

For some reason all the props are inferred as unkown. Why does this happen and is there a way to fix this?

Upvotes: 0

Views: 102

Answers (1)

Emmanuel Ponnudurai
Emmanuel Ponnudurai

Reputation: 1084

You are not specifying the type and hence it gets inferred as unknown and doesn't line up as expected.

You must specify the type properly for it to adhere to the generic type that you have set. Something like this,

TestWithAs<GenericProps<string>>({
    as: GenericComp,
    value: "",
    options: [""],
    genericFunc: (test: string) => {}
})

Upvotes: 1

Related Questions