Theo's Typesafe Cult•12mo ago

Need help with inferring a higher-order component

Hi! I'm trying to create a higher-order component in React that enhances a given component with an additional type. This additional type is used internally of the HOC as it's the return type of the data that's being fetched. The wrapped component will receive the props from the extra data and the rest of the props that the component accepts. To keep the example simple, I've simplified the HOC a bit and it looks like this:

type Props = {
  applicationId: string;
};

export const withApplicationData = <
  TData extends object,
  TProps extends TData
>(
  Component: ComponentType<TProps>
) => {
  return function WithApplicationData({
    applicationId,
    ...props
  }: Props & Omit<TProps, keyof TData>) {
    const data = getDataForApplication<TData>(applicationId);

    if (!data) {
      return null;
    }

    return <Component {...(props as TProps)} {...data} />;
  };
};

type Props = {
  applicationId: string;
};

export const withApplicationData = <
  TData extends object,
  TProps extends TData
>(
  Component: ComponentType<TProps>
) => {
  return function WithApplicationData({
    applicationId,
    ...props
  }: Props & Omit<TProps, keyof TData>) {
    const data = getDataForApplication<TData>(applicationId);

    if (!data) {
      return null;
    }

    return <Component {...(props as TProps)} {...data} />;
  };
};

I would like to use the HOC like this:

type ApplicationData = {
  foo: string;
};

type Props = {
  bar: string;
};

function MyComponent({ foo, bar }: ExtraData & Props) {
  return <div>MyComponent</div>
};

const MyComponentWithData = withApplicationData<ApplicationData>(MyComponent);

type ApplicationData = {
  foo: string;
};

type Props = {
  bar: string;
};

function MyComponent({ foo, bar }: ExtraData & Props) {
  return <div>MyComponent</div>
};

const MyComponentWithData = withApplicationData<ApplicationData>(MyComponent);

However, this doesn't work as the second type helper for withApplicationData doesn't get inferred correctly and it's currently mandatory, meaning I have to use the following code to make it work:

const MyComponentWithData = withApplicationData<ApplicationData, ApplicationData & Props>(MyComponent);

const MyComponentWithData = withApplicationData<ApplicationData, ApplicationData & Props>(MyComponent);

This is redundant as the props can be inferred from the passed component to the HOC. Is there a way to infer this type correctly? So that I don't have to pass a second type argument each time I want to use this HOC?

Solution:

Asked this question in a different Discord group and found out that this can only be done by adding an extra curried function. When the following GitHub issue gets resolved, which has been open since 2018, the second type helper can probably be inferred: https://github.com/microsoft/TypeScript/issues/26242...

GitHub

Proposal: Partial Type Argument Inference · Issue #26242 · microsof...

After exploring the concept in #23696, we've come to the conclusion that implicitly making type arguments available by name would unnecessarily expose previously unobservable implementation det...

Jump to solution

2 Replies

Pexidious•12mo ago

I've created a playground here: https://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecDCE4EAdkiTACoCeYScAvnAGZRFwDkUqGHA3ACgBAemFxgAcxLR6MABbAAzgLSlF8CUhgARFDBQAxaAEEwYADbA0e4KTgBeOAB5Ku-XCQAPGOQAmiuAgAIwArJAwAPgAKFDNLaxhbEgBJXwAuOHUoYBIJAEoHCNwBOFK4bhgAVygSXCYUANc9FEEGEWEhGFp6Y19fYETSFHMABTYwAMccErhYiysbUlSMrJyJVsEBL0hYOFUSdTgAdwG5U3mEpLcUB2cZpvcvHxJ-QNDwrHuxiAmPbz9GtcBNEZoRiGQKBkwZAIVRui5vhMIgICvYitNShVqrVmJUSBgknAAOqnc7xRYka5RDFlObkwYpXyYGalAB07LA42UpQYGV6-QZw0RAQAZHAAPIgAYIrnYADWSGoEGYcAeKAiBRppX2h18zVumh0zSMUDJCwZLmu0Tp5qSqTymzK4hVUQAhHr9JqWWUsTU4CRKuZzIInW1vb7ak5oaRyPAcOzWVFOT8Ag1VcK8kx4+yPSgmMIIiHGBshO04ABactwACinhQ4HM9ErnW6cDNl1I11uNOYEAgKxg2VyJYEXTocAAstRo7Dhd2ZkEUFAB0P1gIGJtcfiGZPp0QYbHqSw+9hF1BGHy4rbO-qxVOZ7GM8VMVpsc5+gA3CL3-cxihOYRP2RDchB1eBtAgJBFCJaA5VuE55HbClricJCGWubA0KuW9dwfChhWiH9wVjB1QLUcDIMUAA5CAYBgqA4McBCzivDtKWaVDWOQ5pCL3YiKAdOBRDgCRgA-KDZlVABlDwoDYKAhC3Ak7HOKIvSdCM4Cib0nScICdKdMonAgqD6Lgm02NSewACIY2suAzxss9y2TMB7ILAzDOcEzqNoszZi4hkrNssh3KKYSpUURQ1jgVzuS85xALE5EnTydcgA As you can see, there's an error on line 50.

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Solution

Pexidious•12mo ago

GitHub

Proposal: Partial Type Argument Inference · Issue #26242 · microsof...

After exploring the concept in #23696, we've come to the conclusion that implicitly making type arguments available by name would unnecessarily expose previously unobservable implementation det...

Gaming

Programming

Need help with inferring a higher-order component