Use with typescript

[Jamie]

I've been trying for a long time to figure out how to import this into typescript in an angular 4 app. Any thoughts?

[Alexey Shevchenko]

Yeah, there are no @types/canvas-particle-network, so there is option 1) create our own create-particle-network.d.ts file, type ourselves; or 2) exact the same as 1) plus publish it to NPM

so, here is my "lazy" manual type infer:

type TOptionable<T> = T | undefined;

declare module 'canvas-particle-network' {
  type TSpeed = TOptionable<'fast' | 'slow' | 'none'>;
  type TDensity = TOptionable<'high' | 'low'>;
  type TCanvas = HTMLElement;
  type TOptions = {
    /**
     * Color of the particles. Must be a valid hexadecimal code.
     * Default: #ffffff
     */
    particleColor?: string;
    /**
     * Specifies a background color or image to the canvas. Must be a valid image URL (e.g. img/demo-bg.jpg) or hexadecimal code.
     * Default: #1a252f
     */
    background?: string;
    /**
     * Allow users to click on the canvas to create a new particle. Its velocity will depend on the specified speed (see below).
     * Default: true
     */
    interactive?: boolean;
    /**
     * Velocity of the particles. Must be one of the following:
     *  none
     *  slow
     *  medium
     *  fast
     * Default: medium
     */
    speed?: TSpeed;
    /**
     * Density of the particles. Actual amount depends on the canvas size, and is calculate by dividing the total canvas size by the density. The following values are accepted:
          low (or 20000)
          medium (or 10000)
          high (or 5000)
          Any number
       Please note that the higher the density, the more computationally intensive / slower each animation step becomes!
     * Default: medium (alias for 10000)
     */
    density: TDensity | string;
  };
  class ParticleNetwork {
    constructor(canvas: TCanvas, options: TOptions);

    public init(): void;
    public update(): void;
    public setVelocity(speed: TSpeed): number;
    public setDensity(density: TDensity | string): number;
    public setStyles(div, styles): void;
  }
}