React Не удалось найти файл декларации для модуля «response-vis» - PullRequest
Новая
       45

React Не удалось найти файл декларации для модуля «response-vis»

0 голосов
/ 11 октября 2018

Я установил реагирующую библиотеку для своего кода реакции.Я использовал эту команду, как в учебнике: npm install react-vis --saveНо когда я включаю библиотеку с этим кодом: import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';Это дает мне следующую ошибку:

Could not find a declaration file for module 'react-vis'. 'C:/react-vis/dist/index.js' implicitly has an 'any' type.Try npm install @types/react-vis if it exists or add a new declaration (.d.ts) file containing declare module 'react-vis';И даже это не работает.Кто-нибудь знает, как это сделать?Я только новичок в реакции.

Ответы [ 3 ]

0 голосов
/ 11 октября 2018

Я полагаю, что вы используете машинопись для компиляции вашего кода.Сначала попробуйте npm install @types/react-vis.Если это не сработает, то вам нужно выбрать более длинный маршрут:- Создайте имя папки: набрав в корне вашего проекта,- внутри набора текста создайте новую папку с именем: " реагировать-vis" и в этой папке создайте файл реагировать-vis.d.ts - запишите declare module 'react-vis' в файл response-vis.d.ts.

// react-vis.d.ts
 declare module 'react-vis';</br>

- перейдите в файл tsconfig.json и добавьте "typeRoots": [ "../../typings", "../../node_modules/@types"] в compilerOptions (с правильным относительным путем к вашим папкам), чтобы TypeScript знал, где он может найтивведите определения ваших библиотек и модулей и добавьте новое свойство- добавьте exclude": ["../../node_modules", "../../typings"] "в файл tsconfig.json. Вот пример того, как должен выглядеть ваш файл tsconfig.json: 

{
"compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "../dst/",
    "target": "ESNEXT",
    "typeRoots": [
        "../../typings",
        "../../node_modules/@types"
    ]
},
"lib": [
        "es2016"
],
"exclude": [
    "../../node_modules",
    "../../typings"
]

}
Для получения дополнительной информации обращайтесь к: https://stackoverflow.com/a/51320328/4998546

0 голосов
/ 14 января 2019

Файл декларации был создан evgsil;вы можете получить файл декларации, который он создал в своем репо, по адресу https://github.com/evgsil/react-vis-typings. Это файл реагировать-vis.d.ts.Чтобы использовать его, вы можете скопировать файл в локальную папку и затем ссылаться на него из файла, который импортирует реагирует.Чтобы сослаться на него, вы можете добавить 

/// <reference path="./react-vis.d.ts"/>

в начало файла, который его импортирует.Значение, назначенное ссылочному пути, должно быть относительным путем к тому месту, куда вы сохранили файл d.ts.

Таким образом, файл с импортированной реакцией может выглядеть следующим образом: 

/// <reference path="../../../dts/react-vis.d.ts"/>
import React from 'react';
import "react-vis/dist/style.css";
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';

export function FirstPlot() {
    return(
        <XYPlot
            width={300}
            height={300}>
            <HorizontalGridLines />
            <LineSeries
                data={[
                {x: 1, y: 10},
                {x: 2, y: 5},
                {x: 3, y: 15}
                ]}/>
        <XAxis />
            <YAxis />
        </XYPlot>
    )
}

Надеемся, что скоро появится решение @types, но до тех пор это работало для меня.

PS Если вам интересно, что это за /// <reference path />, вы можете прочитать конкретную документацию о нем здесь .В машинописи это называется «директива с тройным слешем».

0 голосов
/ 11 октября 2018

Я создал демо в этой песочнице здесь: https://codesandbox.io/s/64k21qmq43

убедитесь, что у вас установлена ​​последняя версияact-vis (1.11.2)

Package.json 

"dependencies": {
    "react-vis": "1.11.2"
  },

Возможно, удалите все ваши модули узла и снова запустите npm install с вашим новым обновленным package.json.Обычно ошибки, которые вы описываете, приводят к тому, что ваши модули ведут себя странно ... Вот почему я предлагаю переустановить их;)

тогда ваш компонент будет работать нормально так: 

import React from "react";
import ReactDOM from "react-dom";

import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  LineSeries
} from "react-vis";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <XYPlot width={300} height={300}>
        <HorizontalGridLines />
        <LineSeries data={[{ x: 1, y: 10 }, { x: 2, y: 5 }, { x: 3, y: 15 }]} />
        <XAxis />
        <YAxis />
      </XYPlot>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Если вы последуете моему примеру с песочницей, у вас все будет хорошо! Удачи!

...