TS support for new canvas

[joannajjliu]

Add TS support for canvas-sketch sketch.ts --new

Can we attempt to fix this issue ourselves, and create a PR? 🙏🏻

[sfrieson]

I've been working for a bit now on adding an @types/canvas-sketch package which might be helpful for you instead. I've been using the types in my .js files and it's been working well.

The reason I haven't published it yet is because I know my usage of canvas-sketch is pretty narrow (I'm only doing 2D sketches).

If you think this might be helpful to you though, I can try pushing up what I have and it can keep growing from there.

[baparham]

After a few minutes figuring this out with jsdoc formatting, it is possible to get the type hints in the callback function inside the default sketch function that is generated for us:

/**
 * @typedef SketchFuncProps
 * @type {object}
 * @property {CanvasRenderingContext2D} context - context of canvas.
 * @property {number} width - width of canvas.
 * @property {number} height - height of canvas.
 */
const sketch = () => {
  return (
    /** @type {SketchFuncProps} */
    { context, width, height }
  ) => {
    ...
  };
...

I ended up also doing yarn add -D jsdoc as well to get jsdoc installed in my project, but I'm not 100% sure that was necessary. I also use the eslint vscode plugin, which may contribute to the typings.

[edit: I removed jsdoc from my project's dependencies and it still works, so it may not be required to have jsdoc installed]

Doing that, I get the intellisense based suggestions when trying to tab complete:

[baparham]

I still would love to see native typescript support from this library though. I couldn't figure out how to add a typsecript loader/transformer to browserify in the canvas-sketch-cli code though, which I suspect is one of the fundamental changes required to support TS out of the box.

[alvinometric]

@sfrieson Hey Steven, did you ever release this package? I found https://github.com/adameier/canvas-sketch-types/

[sfrieson]

@alvinometric I have not for the same reason I stated above. My usage is very limited. My intention is to publish it under Definitely Typed (@types/*), but it seems like it'd be nice to have good coverage before doing that, especially since their motto is "The repository for high quality TypeScript type definitions."

Thanks for sharing that repo. It hasn't been updated in a while, but it seems more complete than what I have. Maybe what I have and what's there can be merged as a good starting place for Definitely Typed.

Do you have any other thoughts? Are you interested in helping maintain/test?

[mattdesl]

In addition to supporting .ts files, I like the idea of adding types for things like the settings object via JSDoc comments, rather than trying to keep a type definition file in sync with the code. More details here too: https://github.com/voxpelli/types-in-js

[alvinometric]

@sfrieson I had a first go at it: https://github.com/mattdesl/canvas-sketch/pull/189 This is my first time doing it so any tips welcome

[sfrieson]

I wasn't sure if you were interested in adding JSDoc comments to the code base, which is why I went the route of maintaining definition files locally to unblock myself.

[alvinometric]

If you have the type definitions ready, feel free to submit a PR