Typescript/Flow support

After having used this tool for a bit, I’m starting to really miss the type-safety I’m used to on other projects.

I definitely think the default should be vanilla JS, since it’s much more familiar and lower-friction, but I wonder if it’d be worth setting it up to transpile Typescript or Flow? I think ideally, the user experience wouldn’t change at all, except for it processing .ts files as well as .js.

(I’ve actually never used Typescript, I’ve used Flow extensively… but TS is much more popular than Flow, so it probably makes more sense to focus on that)

[neefrehman]

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?

[henckellbach]

@mattdesl I tried my hand at typing the basics (RendererObjects & SketchManager excluded): https://github.com/mattdesl/canvas-sketch/pull/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);