If you are using React and TypeScript together as I do, you probably noticed that lot of third-party React components you find on Github don’t have type definition files and you don’t get benefit from all great things you from Typescript. If you still don’t know anything about TypeScript definitely check it out.
First thing it bothered me in my case (I am using Visual Studio) is that I can’t write ES6 import statements for those components that leave inside node_modules folder.
import TextBox from '../components/Common/TextBox';
import Particles from "react-particles-js";
Notice how I am here importing custom component inside components folder. It works great. But when I try to import react-particles-js react component (from node_modules folder) I get this error in Visual Studio:
Cannot find module ‘react-particles-js’. To get around this I used to use require statement instead.
const Particles=require(‘react-particles-js’).
It worked great because Visual Studio was not complaining now about missing module.
Unfortunatelly, I don’t get any intellisense support (one benefit of TypeScript) when I try to use Particles component.
I decided to make my own type definition file for Particles component.
Fortunatelly it is not hard to start. I created folder typings under root (in fact I already had it because I had other d.ts files living in here like react.d.ts.
I created react-particles-js.d.ts file inside folder and created TypeScript module react-particles-js like this:
Notice how I am here using export default. I am exporting default to be able to use it like this:
import Particles from 'react-particles-js".
If I didn’t do that I would need to access Particles component like this:
import {Particles} from ''react-particles-js"
If you need to export other things except default thing you can just use export keyword (notice export interface ParticlesProps
and use it like this:
import Particles,{ParticlesProps} from 'react-particles-js'.
Because Particles compoent is React component it is of type React.ComponentClass where props is interface for props that this component will receive. (in this case width, height, params, style props.
Notice now how I am using this component:
I get intellisense support inside my TSX for that component and with F12 I can jump to file where definition lives.