Typescript/Flow support

[joshwcomeau]

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)

[aweary]

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.

[dmnsgn]

@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.

[nkint]

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

[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?

[mattdesl]

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!

[henckellbach]

@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);