pass generic arguments to a React.FunctionComponent in typescript declaration file

Question

I am trying to add a type definition to a .d.ts file for a React.FunctionComponent that looks like this:

Tree.propTypes = {
  root: PropTypes.object.isRequired,
  children: PropTypes.func,
  top: PropTypes.number,
  left: PropTypes.number,
  className: PropTypes.string,
  size: PropTypes.arrayOf(PropTypes.number),
  nodeSize: PropTypes.arrayOf(PropTypes.number),
  separation: PropTypes.func,
  linkComponent: PropTypes.any,
  nodeComponent: PropTypes.any
};

export default function Tree({
  top,
  left,
  className,
  root,
  size,
  nodeSize,
  separation,
  children,
  linkComponent = DefaultLink,
  nodeComponent = DefaultNode,
  ...restProps
}) {

import React from 'react'; import { TreeLayout, HierarchyPointNode, HierarchyNode } from 'd3-hierarchy';

I have come up with this approach:

export interface TreeProps<Datum, LinkComponentType = any, NodeComponentType = any> {
  root: HierarchyNode<Datum>;
  top?: number;
  left?: number;
  className?: string;
  size?: [number, number];
  linkComponent: React.ComponentType<LinkComponentType>;
  separation: (a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number;
  nodeComponent: React.ComponentType<NodeComponentType>;
  nodeSize?: [number, number];
}


export declare function Tree<
  Datum,
  LinkComponentType = any,
  NodeComponentType = any
>(args: TreeProps<Datum, LinkComponentType, NodeComponentType>): JSX.Element;

Is this the correct way of typing this, I think it should be a React.FunctionComponent like:

export declare const Tree<Datum>

But then I would not be able to pass in the type arguments.

Answer 1

You can declare a module in .d.ts:

declare module 'NAME_OF_THE_PACKAGE' {
    export interface TreeProps<Datum, LinkComponentType = any, NodeComponentType = any> {
        root: HierarchyNode<Datum>;
        top?: number;
        left?: number;
        className?: string;
        size?: [number, number];
        linkComponent: React.ComponentType<LinkComponentType>;
        separation: (a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number;
        nodeComponent: React.ComponentType<NodeComponentType>;
        nodeSize?: [number, number];
    }

    export function Tree<Datum, LinkComponentType = any, NodeComponentType = any>(
        args: TreeProps<Datum, LinkComponentType, NodeComponentType>
    ): JSX.Element;
}

Where NAME_OF_THE_PACKAGE is exactly the name you import the package or install it via npm or yarn.

This way, you will be able to import TreeProps and Tree this way

import { TreeProps, Tree } from 'NAME_OF_THE_PACKAGE'

You can read more about modules here (check the example of how JavaScript libs are declared - "Working with Other JavaScript Libraries").