Tsparticles: No Typescript types for react-tsparticles

[BjoernRave]

When importing the particle component as described in the docs:

import Particles from "react-tsparticles";

I don't get any types for the props of the component. I can however import like the following:

import Particles, {IParticlesParams} from "react-tsparticles";

and then use those types for the options, but it's not ideal.

Typescript Version: 4.0.3
react-tsparticles Version: 1.17.22

[issue-label-bot[bot]]

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

[matteobruni]

I don't understand what you are expecting to be exported, the default export is one and it's easier to have the Component exported.

The IParticlesParams is a type that is not always needed to be imported since an object with a valid structure is accepted by the options parameter.

If you can explain further the issue I can evaluate it better.

[BjoernRave]

I am not expecting anything to be imported, but rather that the default exported component's props are typed, which they arent for me

[matteobruni]

The options attribute is typed, also the obsolete params is still supported and typed.

I don’t really understand what is the problem

export interface IParticlesProps {
    id?: string;
    width?: string;
    height?: string;
    options?: ISourceOptions;
    params?: ISourceOptions;
    style?: CSSProperties;
    className?: string;
    canvasClassName?: string;
    container?: RefObject<Container>;
}

These are the properties exported from 1.18 (1.17 has less optional and a more complex options type).

Can you try using 1.18 (beta for now) and tell me it the issue persist?

[BjoernRave]

I saw you merged 1.18 so I just upgraded to that and the problem persists. I created a codesandbox so you can see it in action: https://codesandbox.io/s/nifty-tesla-06sg1?file=/pages/index.js

[matteobruni]

Thanks! I've understood and found the issue. It will be solved in 1.18.1 that will be released later today.

[BjoernRave]

@matteobruni Great, thanks alot for that :)

[matteobruni]

1.18.1 is out, let me know if everything works fine now

[BjoernRave]

@matteobruni the issue persists in 1.18.1 as you can see in the same codesandbox: https://codesandbox.io/s/nifty-tesla-06sg1?file=/pages/index.js

[matteobruni]

I tried autocompleting on CodeSandbox but it doesn't work fine even in simple HTML tags like h1.

WebStorm instead had a good autocompletion in 1.18.1.

[BjoernRave]

the reason for that was because @types/react was not installed, installed it now and it is autocompleting stuff on the h1 tag, but still not on the Particles Component. I also have the same experience in vscode. Do you get types on the Paricles component in Webstorm?

https://codesandbox.io/s/nifty-tesla-06sg1?file=/pages/index.tsx

[matteobruni]

I've done more tests with VSCode, the demo project inside this repository was working fine, but I've found some tricks to make it work for other projects by adding some JSDoc comments.

I'll release it later today with the fix, this should be the definitive solution (at least I hope it is)