typescript - 将通用参数传递给 typescript 声明文件中的 React.FunctionComponent

Question

我正在尝试为 React.FunctionComponent 添加类型定义到 .d.ts 文件，如下所示:

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

从“ react ”中导入 react ；从 'd3-hierarchy' 导入 { TreeLayout, HierarchyPointNode, HierarchyNode };

我想出了这个方法:

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;

这是正确的输入方式吗，我认为它应该是一个 React.FunctionComponent，例如:

export declare const Tree<Datum>

但那样我就无法传入类型参数了。

Answer 1

你可以在.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;
}

NAME_OF_THE_PACKAGE 正是您导入包或通过 npm 或 yarn 安装包的名称。

这样，您将能够以这种方式导入TreeProps 和Tree

import { TreeProps, Tree } from 'NAME_OF_THE_PACKAGE'

您可以阅读更多关于模块的信息 here (查看如何声明 JavaScript 库的示例 -“使用其他 JavaScript 库”)。