Type Error with dagre.setDefaultEdgeLabel After Adding @ant-design/charts

[Lang-Li-1]

After adding @ant-design/charts to our project, we're encountering TypeScript errors with previously working dagre graph operations. Specifically, the setDefaultEdgeLabel() method now throws:
Property 'setDefaultEdgeLabel' does not exist on type 'Graph<unknown, unknown>'. ts(2339)

This error occurs despite dagre functioning correctly before the addition of @ant-design/charts.

[lxfu1]

TypeScript Error: setDefaultEdgeLabel Not Found on Graph Type in dagre After Adding @ant-design/charts

---

问题说明

引入 @ant-design/charts 后，原本能正常运行的 dagre 图（如 setDefaultEdgeLabel 方法）出现如下 TypeScript 报错：

Property 'setDefaultEdgeLabel' does not exist on type 'Graph<unknown, unknown>'. ts(2339)

---

产生原因分析

• 类型污染：Ant Design Charts 内部可能依赖了 @antv/graphlib（dagre 依赖的基础图结构库），且版本与 dagre 版本不一致。TypeScript 以某一版本的类型覆盖了原有的类型定义，导致你的 Graph 类型没有 setDefaultEdgeLabel 方法声明。
• 多版本冲突：你的项目中可能出现了不同版本 graphlib/dagre。TypeScript 的模块分辨机制下，一旦 Graph 类型不一致，就可能找不到某些方法。

---

解决办法

1. 检查依赖版本

• 查看 @ant-design/charts, dagre, @antv/graphlib 的版本号，确保它们间的依赖关系明确，避免重复或冲突。
• 使用下面命令查找重复依赖：

  npm ls @antv/graphlib dagre

2. 明确类型声明

• TypeScript 类型冲突时，可通过类型断言绕过检查（仅建议临时用法，长期应尽量解决依赖）：

// 假设 yourDagreInstance 是 dagre.graphlib.Graph 的实例
(yourDagreInstance as any).setDefaultEdgeLabel(() => ({}));

3. 明确引入的 Graph 类型

• 在 TypeScript 代码中，确保直接导入 dagre.graphlib.Graph 类型，不要用全局引入的 Graph，示例如下：

import dagre from 'dagre';
// 最保险的：确保是 dagre 的 graphlib.Graph
const g = new dagre.graphlib.Graph();
g.setDefaultEdgeLabel(() => ({})); // 不报错

4. 覆盖 package 依赖或 alias

• 如果确认 @ant-design/charts 内的依赖不影响业务，可通过 resolutions（yarn）或 overrides（npm 8+）强制所有用到 graphlib 的包保持同一版本。

5. 避免使用全局 Graph 类型

• 错误通常发生在如下写法：

  // 错误写法，容易被污染
  const g: Graph = new Graph();

  应当始终使用

  const g = new dagre.graphlib.Graph();

  或

  import { Graph } from 'dagre/lib/graphlib';

---

总结

• 根本原因：依赖冲突/版本覆盖，导致 Graph 类型定义缺失 setDefaultEdgeLabel 方法声明。
• 临时解决方案：用 (xxx as any).setDefaultEdgeLabel() 绕开类型检查。
• 长期建议：检查并统一 dagre/graphlib 版本，显式导入 dagre.graphlib.Graph 类型。

---

相关文档

• dagre 官方文档
• Ant Design Charts 文档

如需进一步协助，请补充提供你的 package.json 相关依赖或具体代码片段。

---

此回答由AI自动生成，仅供参考。如有疑问，请等待维护者回复。

[lxfu1]

@yvonneyx 瞧一瞧。

[Lang-Li-1]

package.json文件
{
"name": "infra",
"private": true,
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prepare": "husky install git-hooks",
"format:ci": "pretty-quick --since HEAD~1",
"format": "pretty-quick --staged",
"commit": "cz",
"lint": "eslint ./src --ext .jsx,.js,.tsx,.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"pnpm": {},
"devDependencies": {
"@byted/create": "1.22.6",
"@byted/prettier-config-standard": "^1.0.0",
"@changesets/cli": "2.24.1",
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"commitizen": "4.2.5",
"eslint": "^8.57.0",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"prettier": "^3.4.2",
"pretty-quick": "^4.1.1",
"ts-node": "^8.10.2"
},
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
},
"dependencies": {
"@ant-design/charts": "1.4.3",
"@byted-codebase/fe-metrics": "0.1.40"
}
}