Here is a small example on how you might type it to make it work

type WrappedProps = {
  b: string;
};
// Here you type the child component as generic T combined with 
// your Wrapped props
const Wrapped = <T,>(Comp: ComponentType<T & WrappedProps>) => {
  return (props: T) => {
    return <Comp {...props} b="World" />;
  };
};

// ============================

type CompProps = {
  a: string;
};
// You need to manually pass the props of your component to the Wrapped
// function, because it can't infer the type
const Comp = Wrapped<CompProps>((props) => {

  // props now has the type CompProps & WrappedProps
  return (
    <p>
      A: {props.a}
      <br />
      B: {props.b}
    </p>
  );
});

// ============================

export default function App() {
  return <Comp a="Hello" />;
}
Answer from MauriceNino on Stack Overflow
🌐
React TypeScript Cheatsheets
react-typescript-cheatsheet.netlify.app › full hoc example
Full HOC Example | React TypeScript Cheatsheets
// inject static values to a component so that they're always provided export function inject<TProps, TInjectedKeys extends keyof TProps>( Component: React.JSXElementConstructor<TProps>, injector: Pick<TProps, TInjectedKeys> ) { return function Injected(props: Omit<TProps, TInjectedKeys>) { return <Component {...(props as TProps)} {...injector} />; }; } For "true" reusability you should also consider exposing a ref for your HOC.
🌐
Max Rozen
maxrozen.com › implement-higher-order-component-react-typescript
How to implement a Higher-order component in React with TypeScript - Max Rozen
I decided to wrap the component with a functional HoC that called the Hook, and passed the result down to the component as a prop. In normal JavaScript, it isn't too complicated, you'd do something like this: import React, { useState } from 'react'; export function withExtraInfo(WrappedComponent) { const [extraInfo, setExtraInfo] = useState(''); const ComponentWithExtraInfo = (props) => { return <WrappedComponent {...props} extraInfo={extraInfo} />; }; return ComponentWithExtraInfo; }
🌐
Stevekinney
stevekinney.github.io › react-and-typescript › higher-order-components
Higher Order Components with TypeScript – Higher Order Components – React && TypeScript
Now, we'll tell our HOC, that cool—set the generic, T to the type of the component that we pass in, but that component must have a character prop that is of the type CharacterType. Next, we want to say that our wrapper is going to take all of the props that the wrapped component takes, except for character because we're passing that one in. return (props: Omit<T, keyof WithCharacterProps>) => { // … }; ... Next, we're going to have to help TypeScript along a little bit.
🌐
Medium
medium.com › @jrwebdev › react-higher-order-component-patterns-in-typescript-42278f7590fb
React Higher-Order Components in TypeScript | by James Ravenscroft | Medium
February 13, 2019 - class WithLoading extends React.Component<P & WithLoadingProps> Here we are defining a component to return from the HOC, and specifying that the component will include the passed in component’s props (P) and the HOC’s props (WithLoadingProps). These are combined via a type intersection operator (&). ... Note: in older versions of TypeScript you may need to cast this.props — this.props as WithLoadingProps to avoid a compilation error “Rest types may only be created from object types.”
🌐
React TypeScript Cheatsheets
react-typescript-cheatsheet.netlify.app › react hoc docs in typescript
Section 1: React HOC docs in TypeScript | React TypeScript Cheatsheets
const commentSelector = (_: any, ownProps: any) => ({ id: ownProps.id, }); const commentActions = () => ({ addComment: (str: string) => comments.push({ text: str, id: comments.length }), }); const ConnectedComment = connect(commentSelector, commentActions)(CommentList); // these are the props to be injected by the HOC interface WithSubscriptionProps<T> { data: T; } function connect(mapStateToProps: Function, mapDispatchToProps: Function) { return function <T, P extends WithSubscriptionProps<T>, C>( WrappedComponent: React.ComponentType<T> ) { type Props = React.JSX.LibraryManagedAttributes<C, Omit<P, "data">>; // Creating the inner component.
🌐
Isamatov
isamatov.com › react-hoc-typescript
React Higher Order Components with TypeScript – Web Development Tutorials - Iskander Samatov
August 8, 2021 - Let's cover the right approach of implementing React higher-order components in TypeScript using generics and utility types.
🌐
Linguine Code
linguinecode.com › home › blog › create a typescript hoc (higher order component) in react
Create a TypeScript HOC (Higher Order Component) in React
March 4, 2020 - You may have a number of custom HOC’s (higher order components) in your components deck, and now you’ve implemented TypeScript to your stack. function youreAlwaysCoolHOC(ChildComp) { return class Component extends React.Component { state = { areYouCool: false }; handleClick = () => this.setState({ areYouCool: true }); render() { return ( <> <button onClick={this.handleClick}>Find yout if you're cool</button> <ChildComp areYouCool={this.state.areYouCool} /> </> ); } }; }
Find elsewhere
🌐
React TypeScript Cheatsheets
react-typescript-cheatsheet.netlify.app › intro
HOC Cheatsheet | React TypeScript Cheatsheets
Here is a base HOC example you can copy right away: type PropsAreEqual<P> = ( prevProps: Readonly<P>, nextProps: Readonly<P> ) => boolean; const withSampleHoC = <P extends {}>( component: { (props: P): Exclude<React.ReactNode, undefined>; displayName?: string; }, propsAreEqual?: PropsAreEqual<P> | false, componentName = component.displayName ??
Top answer
1 of 5
12

A bit late to the party. I like to use the Omit TypeScript utility type to solve this issue. Link to the documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#omittk

import React, {ComponentType} from 'react';

export interface AdditionalProps {
    additionalProp: string;
}

export function hoc<P extends AdditionalProps>(WrappedComponent: ComponentType<P>) : ComponentType<Omit<P, 'additionalProp'>> {
    const additionalProp = //...
    return props => (
        <WrappedComponent
            additionalProp={additionalProp}
            {...props as any}
        />
    );
}
2 of 5
6

If what you're asking for is if it's possible to define a HOC that can add a new prop, let's say "thingy", to a component without modifying that component's props definition to include "thingy" I think that's impossible.

That's because at some point in the code you'll end up with:

render() {
    return (
        <WrappedComponent thingy={this.props.thingy} {...this.props}/>
    );
}

And that will always throw an error if WrappedComponent does not include thingy in its props definition. The child has to know what it receives. Off hand, I can't think of a reason for passing a prop to a component that doesn't know about to it anyway. You wouldn't be able to reference that prop in the child component without an error.

I think the trick is to define the HOC as a generic around the props of the child and then to just include your prop thingy or whatever in that child's interface explicitly.

interface HocProps {
    // Contains the prop my HOC needs
    thingy: number;
}

const hoc = function<P extends HocProps>(
    WrappedComponent: new () => React.Component<P, any>
) {
    return class MyHOC extends React.Component<P, any> {
        render() {
            return (
                <WrappedComponent {...this.props}/>
            );
        }
    }
}
export default hoc;

// Example child class

// Need to make sure the Child class includes 'thingy' in its props definition or
// this will throw an error below where we assign `const Child = hoc(ChildClass)`
interface ChildClassProps {
    thingy: number;
}

class ChildClass extends React.Component<ChildClassProps, void> {
    render() {
        return (
            <h1>{this.props.thingy}</h1>
        );
    }
}

const Child = hoc(ChildClass);

Now of course this example HOC doesn't really do anything. Really HOC's should be doing some sort of logic to provide a value for the child prop. Like for example maybe you have a component that displays some generic data that gets updated repeatedly. You could have different ways it gets updated and create HOC's to separate that logic out.

You have a component:

interface ChildComponentProps {
    lastUpdated: number;
    data: any;
}

class ChildComponent extends React.Component<ChildComponentProps, void> {
    render() {
        return (
            <div>
                <h1>{this.props.lastUpdated}</h1>
                <p>{JSON.stringify(this.props.data)}</p>
            </div>
        );
    }
}

And then an example HOC that just updates the child component on a fixed interval using setInterval might be:

interface AutoUpdateProps {
    lastUpdated: number;
}

export function AutoUpdate<P extends AutoUpdateProps>(
    WrappedComponent: new () => React.Component<P, any>,
    updateInterval: number
) {
    return class extends React.Component<P, any> {
        autoUpdateIntervalId: number;
        lastUpdated: number;

        componentWillMount() {
            this.lastUpdated = 0;
            this.autoUpdateIntervalId = setInterval(() => {
                this.lastUpdated = performance.now();
                this.forceUpdate();
            }, updateInterval);
        }

        componentWillUnMount() {
            clearInterval(this.autoUpdateIntervalId);
        }

        render() {
            return (
                <WrappedComponent lastUpdated={this.lastUpdated} {...this.props}/>
            );
        }
    }
}

Then we could create a component that updates our child once every second like this:

const Child = AutoUpdate(ChildComponent, 1000);
🌐
DEV Community
dev.to › abhidatta0 › understanding-hocs-in-react-in-typescript-42l2
Understanding HOCs in React (in Typescript) - DEV Community
August 23, 2022 - For our example, we just want to display the window.innerWidth in "realtime". To achieve this we can write a functional component and use the useEffect hook and attach a listener function which will update a state variable. See code: https://github.com/abhidatta0/react-hoc-in-typescript/blob/master/src/ResizeComponent.tsx
🌐
Stack Overflow
stackoverflow.com › questions › 78247415 › how-to-implement-a-higher-order-component-using-typescript
How to implement a Higher Order Component using TypeScript?
I am trying to implement a Higher Order Component (HOC) in TypeScript so that I can pass my ErrorBoundary as a parameter to the HOC and then the HOC returns the current location of the user so that I can use it in my ErrorBoundary component. ... import React from "react"; interface ErrorBoundaryProps { fallback: React.ReactNode; children: React.ReactNode; location: { pathname: string; }; } class ErrorBoundary extends React.Component<ErrorBoundaryProps> { state = { hasError: false }; static getDerivedStateFromError(error: Error) { return { hasError: true }; } componentDidUpdate(previousProps: ErrorBoundaryProps) { if (previousProps.location.pathname !== this.props.location.pathname) { this.setState({ hasError: false }); } } render() { if (this.state.hasError) { return this.props.fallback; } return this.props.children; } } export default ErrorBoundary;
🌐
Medium
vrashkov.medium.com › typescript-higher-order-components-best-practices-for-writing-scalable-and-type-safe-react-apps-4585f99c39b0
TypeScript Higher-Order Components: Best Practices for Writing Scalable and Type-Safe React Apps | by Vasil Rashkov | Medium
June 28, 2024 - TypeScript Higher-Order Components: Best Practices for Writing Scalable and Type-Safe React Apps Higher-Order Components (HOCs) in React are functions that accept a component as input and return a …
🌐
DEV Community
dev.to › conw_y › generic-hoc-creator-pattern-for-react-3354
Generic HOC creator pattern for React - DEV Community
January 24, 2025 - Here's the createWithHOC function I developed in Typescript for creating the with* HOC creator. import { get, omit } from "lodash"; import { ComponentType } from "react"; export function createWithHOC<THOCProps, THOCName extends string>( HOC: ComponentType<THOCProps>, hocName: THOCName, ) { return function withHOC<TLOCProps extends JSX.IntrinsicAttributes>( LOC: ComponentType<TLOCProps>, ) { return function ComponentWithLOC( props: TLOCProps & Partial<Record<THOCName, THOCProps>>, ) { const hocProps = props[hocName] as THOCProps; if (hocProps) { const hocPropsWithoutKey = omit(hocProps, "key") as THOCProps; const hocKey = String(get(hocProps, "key")); const locPropsWithoutHocProps = omit(props, hocName) as TLOCProps; return ( <HOC {...hocPropsWithoutKey} key={hocKey}> <LOC {...locPropsWithoutHocProps} /> </HOC> ); } else { return <LOC {...props} />; } }; }; }
🌐
Geromekevin
geromekevin.com › typescript-hoc-and-decorators-in-react
TypeScript HOC (Higher-Order Component) and Decorators in React | Jan Hesters
You are going to learn how to build a HOC for React using TypeScript. We are going to develop a Higher-Order Component that adds a badge to other components. We are also going to use them as decorators.
🌐
Nabeelvalley
nabeelvalley.co.za › docs › react › react-hoc
Functional Higher Order Components (HOCs) with Typescript
An HOC in React is a component that wraps another component to provide additional props or functionality to the wrapped component · Here’s a simple example of how we can create an HOC using Typescript:
🌐
Reactandtypescript
reactandtypescript.dev › examples › hocs
Higher Order Components (HOCs) | React And Typescript
React And Typescript · Edit page · HomeTypeScript Crash Course · Installation · Examples · Class ComponentsFunctional ComponentsHigher Order Components (HOCs)Injected PropsHooksReact RouterContributingReadme · Please note that this section uses the utility-types package since, as of May 2019, the helper functions were unavailable in TypeScript.
🌐
Pluralsight
pluralsight.com › blog › guides
Higher Order Composition with Typescript for React | Online Courses, Learning Paths, and Certifications - Pluralsight
April 12, 2019 - The use of <T> in this signature is a Typescript generic type.In this case T denotes the type of component props passed when the Higher-Order Component is being rendered and, as no props are being injected, the component that gets returned should have props of the same type as the original. The code for the full function is here: function withHeaderAndFooter<T>(Component: React.ComponentType<T>) { return (props: T) => ( <> <header className="app-header"> ...
🌐
Medium
medium.com › @jan.hesters › typescript-hoc-higher-order-component-and-decorators-in-react-586787f5a9e7
TypeScript HOC (Higher-Order Component) and Decorators in React | by Jan Hesters | Medium
April 1, 2019 - You are going to learn how to build a HOC for React using TypeScript. We are going to develop a Higher-Order Component that adds a badge to other components. We are also going to use them as decorators.