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';
甚至那都不起作用。有谁知道该怎么做？
我只是反应的初学者。

Answer 1

我在此沙箱中创建了一个演示： 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 2

我相信您正在使用打字稿来编译代码。第一次尝试 npm install @types/react-vis。
如果不起作用，则必须采取更长的路线：
-在项目的根目录中创建一个文件夹名称： typings ，
-在内部键入内容中，创建一个名为“ react-vis” 的新文件夹，并在该文件夹中创建一个 react-vis.d.ts 文件
-将declare module 'react-vis'写在react-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

Answer 3

一个声明文件是由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解决方案即将面世，但是在那之前这对我一直有效。

P.S。如果您想知道/// <reference path />的全部含义，可以阅读有关here的特定文档。在打字稿中，它称为“三斜杠指令”。

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

3 个答案: