已安装D3与d3-force-attract，TypeScript中如何正确导入？

你遇到的两个错误其实是两个独立的问题，咱们一步步来搞定：

1. 解决「Duplicate identifier 'd3'」错误 #

你现在两次导入都用了* as d3作为命名空间，这直接导致了变量名重复的冲突。d3-force-attract是D3的插件，不需要和核心D3共用同一个命名空间，我们可以单独导入它：

// 导入核心D3模块
import * as d3 from 'd3';
// 单独导入d3-force-attract，使用不同的命名
import attract from 'd3-force-attract';
// 如果模块是导出多个内容的形式，也可以这样写：
// import * as attract from 'd3-force-attract';

2. 解决「Could not find a declaration file for module 'd3-force-attract'」错误 #

这个问题源于d3-force-attract官方没有提供TypeScript的类型声明文件，我们可以自己创建一个简单的类型声明来解决：

步骤1：创建自定义类型声明文件 #

在你的项目里新建一个类型目录，比如src/types/d3-force-attract，然后在该目录下创建index.d.ts文件。如果需要基础的类型支持，可以写入以下内容：

declare module 'd3-force-attract' {
  import { SimulationForce } from 'd3-force';

  export default function attract(
    target?: { x: number; y: number } | ((d: any) => { x: number; y: number }),
    strength?: number | ((d: any) => number)
  ): SimulationForce<any, any>;
}

如果暂时不需要精确的类型校验，也可以用更简化的版本：

declare module 'd3-force-attract';

步骤2：让TypeScript识别该类型文件 #

打开你的tsconfig.json，确保include数组包含了我们新建的类型目录，比如：

{
  "include": [
    "src/**/*",
    "src/types/**/*"
  ]
}

3. 在代码中使用插件 #

现在你可以把attract方法挂载到D3的force模块上，方便和其他D3力导向布局功能一起使用：

// 将插件方法挂载到D3对象
d3.forceAttract = attract;

// 使用示例：结合其他力导向布局
const simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody())
  .force('attract', d3.forceAttract({ x: width/2, y: height/2 }).strength(0.05));

这样就能同时解决两个错误，顺利在TypeScript中使用d3-force-attract了。

内容的提问来源于stack exchange，提问作者Sam P