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

Question

我为我的反应代码安装了 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';
即使这样也行不通。 有人知道怎么做吗？
我只是反应的初学者。

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。在打字稿中，它被称为“三斜杠指令”。

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，
- 在类型中创建一个名为“react-vis” 的新文件夹，并在该文件夹中创建一个 react-vis.d.ts 文件
- 在 react-vis.d.ts 文件中写入 declare module 'react-vis'。

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

- 转到您的 tsconfig.json 文件并在 compilerOptions 中添加 "typeRoots": [ "../../typings", "../../node_modules/@types"]（带有到您的文件夹的正确相对路径），让 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