Typescript/Flow support about canvas-sketch HOT 6 CLOSED

I've just been looking into integrating TypeScript with canvas-sketch in a React project of mine. I've created a Wrapper component and have documented the types myself for now based on the documentation: https://gist.github.com/neefrehman/eb94d76e3bfd7e562d9f01fbebb97e19

Having access to up-to-date typings for the library would be super useful, would there be a simple way to generate and publish them to @types/canvas-sketch?

from canvas-sketch.

One workaround to getting TypeScript support is to just use @ts-check and type annotation via comments. That lets you get type checking on any JavaScript file without having to add a build step.

from canvas-sketch.

@joshwcomeau the CLI tool can receive extra arguments to be passed to browserify canvas-sketch [file] [opts] -- [browserifyArgs].
So you could potentially use https://github.com/TypeStrong/tsify or even https://github.com/babel/babelify with @babel/preset-typescript.

from canvas-sketch.

This works like a charm:
https://gist.github.com/mattdesl/1e9ab019534838e8c870ae06371be469

from canvas-sketch.

I'd be happy to export types for canvas-sketch and its utilities, although I'm not too familiar with the Typescript ecosystem. Happy to hear more about how this could be done, and/or review some PRs. Cheers!

from canvas-sketch.

@mattdesl I tried my hand at typing the basics (RendererObjects & SketchManager excluded): #103

Usage example:

const canvasSketch = require('canvas-sketch');
import { SketchFunction, SettingsObject } from 'canvas-sketch';

const settings: SettingsObject = {
  duration: 5,
  animate: true,
  dimensions: [512, 512],
};

const sketch: SketchFunction = () => {
  return ({ context, width, height }) => {
    context.fillStyle = 'orange';
    context.fillRect(0, 0, width, height);
  };
};

canvasSketch(sketch, settings);

from canvas-sketch.