如何扩展现有npm模块的类型定义？

Question

我正在使用图表在我的react webapp中制作图表。
在图表的“ XAxis”组件中，有可选的道具“ tickMargin”，但npm包中包含的类型定义未定义该道具。因此，我尝试通过制作自定义类型定义文件（d.ts）来添加此道具。

原始定义

// {project_folder}/node_modules/recharts/types/cartesian/XAxis.d.ts
export interface Props extends BaseAxisProps {
    // some definitions...
}

我的名字

// {project_folder}/@types/recharts/index.d.ts
declare module "recharts" {
  interface BaseAxisProps {
    tickMargin?: number
  }
}

page.tsx

import {XAxis} from "recharts"

<XAxis tickMargin={3} />

但是，然后TS编译器对所有其他图表组件说error TS2305: Module '"recharts"' has no exported member 'XAxis'.。看来我的自定义类型定义已完全取代了exisitng定义。我用谷歌搜索了很多次，但是我仍然不知道如何解决这个问题。如何扩展类型定义而不替换它？

以下是我的tsconfig.json供参考。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "ES6"],
    "jsx": "react",
    "outDir": "./tsc/",
    "baseUrl": "./",
    "paths": {
      "/*": ["./*", "./@types/*"],
      "recharts": ["/node_modules/recharts/types/*", "/@types/recharts/*"]
    },
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

Answer 1

对于遇到类似问题并使用内置 recharts 库类型定义而不是 DT 的任何人。

/src/custom_typings/recharts/index.d.ts

import * as recharts from 'recharts/types/util/types';

declare module 'recharts/types/util/types' {
  export interface BaseAxisProps {
    tickMargin?: number;
  }
}

我不必专门导入该文件或在 tsconfig.json 中引用它。