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.

do linkComponent and nodeComponent impact the props available to the component ? It would seem like they would. Otherwise export declare function seems ok, if you want to use a const it should be export declare const Tree: < Datum, LinkComponentType = any, NodeComponentType = any >(args: TreeProps<Datum, LinkComponentType, NodeComponentType>) => JSX.Element; But I see no need to do this, they should work the same in this case — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jun 9, 2019 at 7:32

Pedro Arantes · Accepted Answer · 2019-06-11 10:38:16Z

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").

Avin Kavish · Accepted Answer · 2019-06-08 07:16:44Z

0

You can declare a type like this

export type Tree<D, LC = any, NC = any> =
    React.FunctionComponent<TreeProps<D, LC, NC>> => JSX.Element

Usage

const Tree: Tree<a,b,c> = (props) => <></>

answered Jun 8, 2019 at 7:16

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

Comments

Fyodor Yemelyanenko · Accepted Answer · 2019-06-08 09:24:16Z

0

You can do

declare const Tree: React.FunctionComponent<TreeProps<Datum, LinkComponentType, NodeComponentType>>;

export default Tree;

Tree will be of type React.FunctionComponent<P> which is (props: PropsWithChildren<P>, context?: any): ReactElement | null; (function component).

May be you've been confused by declare keyword. The best description I found is here.

To create function of type React.FunctionComponent<P> use syntax

const Tree: React.FunctionComponent<TreeProps<Datum, LinkComponentType, NodeComponentType>> =
(props) => {
    return <div className={props.className}>
        Some div
        </div>
}

Note that here is no need for declare keyword.

answered Jun 8, 2019 at 9:24

Fyodor Yemelyanenko

11.9k2 gold badges33 silver badges41 bronze badges

4 Comments

dagda1 Over a year ago

i am creating a declaration file for a 3rd party so there is s need

Fyodor Yemelyanenko Over a year ago

Sorry, I didn't understand you comment. You mean 'so there is I need' or 'so there is no need'?

dagda1 Over a year ago

i’m writing a declaration file index.d.ts for a 3rd party library that does not have a declaration file. are you still saying i dint need declare

Fyodor Yemelyanenko Over a year ago

To declare types for third party lib you should use declare keyword. First code snippet should suit your needs. Code snippet without decalre is to difference between declaring and implementing Function component

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related