React找不到模块“react-vis”的声明文件

Question

我为我的react代码安装了react-vis库。

我使用了这个命令，就像在教程中一样：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';

即使这样也行不通。有人知道怎么做吗？

我只是react的初学者。

Answer 1

evgsil创建了一个声明文件；您可以在https://github.com/evgsil/react-vis-typings的代码库中获得他创建的声明文件。它是react-vis.d.ts文件。要使用它，您可以将文件复制到本地文件夹，然后从导入react-vis的文件中引用它。要引用它，您可以添加

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

添加到导入它的文件的顶部。指定给引用路径的值应该是保存d.ts文件的位置的相对路径。

因此，导入了react-vis的文件可能如下所示：

/// <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解决方案很快就会出现，但在那之前，这对我来说是有效的。

附注:如果你想知道这个/// <reference path />是关于什么的，你可以阅读关于它的特定文档here。在typescript中，它被称为“三重斜杠指令”。

Answer 2

我在这里的沙箱中创建了一个演示：https://codesandbox.io/s/64k21qmq43

确保您拥有最新版本的react-vis (1.11.2)

Package.json

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

也许可以删除所有的节点模块，并使用新的更新后的package.json再次运行npm install。通常，你描述的错误伴随着你的模块行为怪异……这就是我建议重新安装它们的原因。)

那么你的组件就会像这样正常工作：

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);

如果你按照我的沙盒例子，你应该很好！，祝你好运！

Answer 3

我相信你正在使用typescript来编译你的代码。首先尝试npm install @types/react-vis。

如果它不工作，那么你必须走更长的路线：

• 创建一个文件夹名称： typings 在项目的根目录中，
• inside typings创建一个名为"react-vis"的新文件夹，并在该文件夹中创建一个react-vis.d.ts文件

<代码>H112在react-vis.d.ts文件中写入<代码>D13。H214<代码>F215

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

转到tsconfig.json文件并在compilerOptions中添加"typeRoots": [ "../../typings", "../../node_modules/@types"] (使用文件夹的正确相对路径)，让TypeScript知道它可以在哪里找到库和模块的类型定义，并向tsconfig.json文件中添加一个新属性“

• exclude": ["../../node_modules", "../../typings"]”。以下是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