Как использовать Sigma. js в реакции с Typescript

Question

Я пытаюсь настроить простое веб-приложение с React / TypeScript, чтобы я мог поиграть с некоторыми графиками с помощью Sigma. js. Но я не могу получить конечный результат для рендеринга чего-либо с помощью Sigma.

Вот шаги, которым я следовал:

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

Однако, когда я go импортировал Sigma, я обнаружил следующее проблемы:

import { sigma } from 'sigma' 

Сбой с этим сообщением об ошибке:

Ошибка TypeScript в ~ / devel / sigmafiddle / src / App.tsx (4,23): Не удалось найти файл декларации для модуля 'sigma'. '~ / devel / sigmafiddle / node_modules / sigma / endpoint. js' неявно имеет тип 'any'. Попробуйте npm install @types/sigma, если он существует, или добавьте файл нового объявления (.d.ts), содержащий declare module 'sigma'; TS7016 Не очень полезное сообщение, поскольку @ types / sigma не существует в npm.

И если я попробую это:

import { sigma } from 'sigmajs' 

Я получу эту ошибку:

Ошибка TypeScript в ~ / devel / sigmafiddle / src / App.tsx (4,23) Файл '~/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, поэтому возникает следующая ошибка:

Не удается найти модуль «Reaction-Sigma"

Как получить Sigma. js для работы с TypeScript и React?

Answer 1

Вы не импортировали то, что пытаетесь использовать

, замените

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

на

import { sigma } from 'sigma';

Обычно импорт, как указано выше, является распространенным способом используйте lib в проекте js / ts.

---

Обновление

Поскольку в представленной ошибке отсутствует определение типа библиотеки lib,

Файл '~ / devel / graph-грамматика / node_modules / @ types / sigmajs / index.d.ts 'не является модулем.

npm install --save @types/sigmajs

И импорт может работать как обычно.

import { sigma } from 'sigma';

См. @ типы / сигма js

---

обновление № 2

Возможно, вам потребуется реагировать-сигма npm, репо в вашем реактивном проекте.

Установите его, и импорт, ссылаясь на документ, выглядит нормально.

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

Если это не сработает, попробуйте установить оба sigma и react-sigma, так как ploty.js нужны оба ploty.js и react-ploty.js установлены, я думаю, вы можете столкнуться с подобной ситуацией.

---

Обновление № 3

Кажется реагировать-сигма не ' t поддерживают typescript, вместо этого они поддерживают flow-type.

См. документ реаги-сигма