React Could not find a declaration file for module 'react-vis'

Question

I installed react-vis library for my react code.
I used this command, like in the tutorial: npm install react-vis --save
But when I include the library with this code: import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
It gives me the following error:

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';
And even that doesn't work. Anyone know how to do this?
I'm just a beginner in react.

Answer 1

A declaration file was created by evgsil; you can get the declaration file he created in his repo at https://github.com/evgsil/react-vis-typings. It is the react-vis.d.ts file. To use it, you can copy the file to a local folder and then reference it from the file that imports react-vis. To reference it, you may add

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

to the top of the file that imports it. The value assigned to the reference path should be the relative path to wherever you saved the d.ts file.

So a file with react-vis imported may look like this:

/// <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>
    )
}

Hopefully an @types solution will be forthcoming soon, but until then this has worked for me.

P.S. If you are wondering what that /// <reference path /> is all about, you can read the specific documentation about it here. In typescript, it is called a "triple-slash directive."