如何在 React 中使用 Sigma.js 和 Typescript

Question

我正在尝试使用 React/TypeScript 设置一个简单的 Web 应用程序，以便我可以使用 Sigma.js 处理一些图表。但我无法得到最终结果来用 Sigma 渲染任何东西。

这是我遵循的步骤：

$ npx create-react-app sigmafiddle --template typescript^C
$ cd sigmafiddle
$ yarn add sigma
$ yarn add @types/sigmajs

但是，我在导入 Sigma 时遇到以下问题：

import { sigma } from 'sigma' 

失败并显示此错误消息：

~/devel/sigmafiddle/src/App.tsx(4,23) 中的 TypeScript 错误： 找不到模块“sigma”的声明文件。 '~/devel/sigmafiddle/node_modules/sigma/endpoint.js' 隐含了一个 'any' 类型。 尝试npm install @types/sigma（如果存在）或添加包含declare module 'sigma'; TS7016 的新声明（.d.ts）文件 不是一个真正有用的消息，因为 npm 中不存在 @types/sigma。

如果我试试这个：

import { sigma } from 'sigmajs' 

我遇到了这个失败：

~/devel/sigmafiddle/src/App.tsx(4,23) 中的 TypeScript 错误： 文件 '~/devel/sigmafiddle/node_modules/@types/sigmajs/index.d.ts' 不是模块。 TS2306

我也试过包react-sigma:

yarn add react-sigma

// in app.tsx
import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';

很遗憾没有@types/react-sigma包，所以这会导致如下错误：

找不到模块“react-sigma”

如何让 sigma.js 与 TypeScript 和 React 一起使用？

Answer 1

您没有导入您要使用的内容

替换

/// <reference types="@types/sigmajs" />

到

import { sigma } from 'sigma';

通常，如上导入是 js/ts 项目中使用 lib 的常用方式。

---

更新

由于错误似乎缺少库的类型定义，

文件 '~/devel/graph-grammar/node_modules/@types/sigmajs/index.d.ts' 不是模块。

npm install --save @types/sigmajs

并且可以正常导入。

import { sigma } from 'sigma';

参考@types/sigmajs

---

2号更新

你可能需要 react-sigma npm, repo 在你的 react 项目中。

安装它，导入参考文档就好了。

import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';

如果不行，试试sigma和react-sigma，因为ploty.js需要同时安装ploty.js和react-ploty.js，我猜你可能会遇到类似的情况。

---

更新3号

似乎 react-sigma 不支持typescript，而是支持flow-type。

参考：react-sigma的文档