How to Use higher order component in Typescript

When using Higher-Order Components (HOCs) in TypeScript, it is crucial to ensure that types are correctly passed and applied to both the original component and the newly returned component. Higher-Order Components are essentially functions that accept a component and return a new component.

Below, I will demonstrate with a simple example how to implement and use a Higher-Order Component in TypeScript.

Step 1: Define the Original Component

First, define a simple React component. Here, we assume a component that accepts props containing a name string property.

typescript
import React from 'react';

interface Props {
  name: string;
}

const MyComponent: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

Step 2: Create the Higher-Order Component

Next, create a Higher-Order Component that wraps any incoming component and adds additional functionality. For example, we can create an HOC to add a background color.

typescript
import React from 'react';

// HOC function that accepts a Component and returns a new component
function withBackgroundColor<T extends React.ComponentProps<any>>(Component: React.ComponentType<T>) {
  return (props: T) => (
    <div style={{ backgroundColor: 'yellow' }}>
      <Component {...props} />
    </div>
  );
}

This HOC accepts a component Component and returns a new functional component. Here, the generic T ensures that our HOC can accept any type of props and pass them through to the internal Component.

Step 3: Use the Higher-Order Component

Now, we can use the withBackgroundColor HOC to wrap MyComponent, resulting in a new component that has a yellow background.

typescript
const EnhancedComponent = withBackgroundColor(MyComponent);

function App() {
  return (
    <EnhancedComponent name="Alice" />
  );
}

In this example, EnhancedComponent is the MyComponent enhanced by the withBackgroundColor function. We pass the name property to EnhancedComponent, which ultimately passes it through to MyComponent.

Summary

When using Higher-Order Components in TypeScript, the key is to properly manage types. Using generics ensures that types are correctly passed, maintaining reusability and type safety for both components and Higher-Order Components. Through simple examples, we can see how to create and use Higher-Order Components to enhance existing components' functionality while preserving type correctness.