TS compilation since Async feature

[Ricard]

Hello @pshihn, thank you for this great contribution 👯 👏

Since version 2.2.0, which introduce async methods, I'm not being able to build the library inside angular 6 app. I do not provide OS and versions information because the issue reside on types of RoughCanvasAsync (promise of...) not matching the implemented class RoughCanvas.

Here you could see an evidence

[dispix]

I have issues with the typing too. I wanted to test the library in a react + typescript environment and got this behavior:

• In this first image, we see that the app renders fine but typescript triggers a type error:
• In this second image, we see that this time the typing is correctly applied but the application fails:

Link to the sandbox

[pshihn]

@Ricard I realize that RoughCanvasAsync and RoughSync do not have the same return type I have been using // @ts-ignore in the build which i realize is just a hack. I did not want to break the pre-typescript version of the library by renaming the methods.

One option is that the return type is Drawable | Promise but that will add an extra check to the lib user.

Let me think about it a bit.

You could also start using the pre-built version of the library as well to get around it temporarily

[pshihn]

@dispix not sure what is happening in your case. I think it is picking up the wrong location of the lib/type defs. Maybe your tsconfig is not picking it up?

[pshihn]

@Ricard I have cleaned up the interfaces: https://github.com/pshihn/rough/pull/84 should fix this

[pshihn]

Available in v2.2.5

[dispix]

@pshihn you can see the configuration in the sandbox, there's nothing special there and it works for other libraries so I have no idea where it comes from. I thought this was related to this issue but if you want I can create a new one.

[pshihn]

@dispix When I go to your url https://xoz411z0mq.codesandbox.io/ it loads fine and draws a box

Also, the error you're getting is that canvas is not defined in rough, where as type types clearly has the definition: https://github.com/pshihn/rough/blob/master/bin/rough.d.ts

My theory is that in the sandbox environment, either typings file is not being picked up, or when you import, it is importing the wrong type of module. There's a UMD version in the dist folder and there's the es6 module in the bin folder.

[pshihn]

It seems like codesandbox.io is not paying attention to the types property in package.json.

[pshihn]

Alright.. A couple of things: Since module being loading typescript is not the commonjs module, https://www.typescriptlang.org/docs/handbook/modules.html says that import should be like this:

import rough from 'roughjs';

But it doesn't work properly on codesandbox.

Here's the working example based on your code that works on stackblitz: https://stackblitz.com/edit/react-ts-mofibf

Hope this helps, @dispix