Zoeken op website

generieke argumenten doorgeven aan een React.FunctionComponent in een Typescript-declaratiebestanden

Ik probeer een type-definitie toe te voegen aan een .d.ts-bestand voor een React.FunctionComponent dat er zo uitziet:

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
}) {

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

Ik ben met deze aanpak gekomen:

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 dit de juiste manier om dit te typen, ik denk dat het een React.FunctionComponent zou moeten zijn zoals:

export declare const Tree<Datum>

Maar dan zou ik de typeargumenten niet kunnen doorgeven.

Antwoord #1

Je kunt een module declareren 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;
}

Waar NAME_OF_THE_PACKAGE precies de naam is waaronder je het pakket importeert of installeert via npm of yarn.

Op deze manier kun je TreeProps en Tree op deze manier importeren

import { TreeProps, Tree } from 'NAME_OF_THE_PACKAGE'

Je kunt hier meer lezen over modules (bekijk het voorbeeld van hoe JavaScript-bibliotheken worden gedeclareerd - "Werken met andere JavaScript-bibliotheken").

Antwoord #2

Je kunt een type zo declareren

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

Gebruik

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

Gerelateerde artikelen