typescript iro types

[mksglu]

I want to use it in the project I developed with ReactJS and TypeScript. That's why I need types. Is it possible to provide this?

[jaames]

I'm not very familiar with how TypeScript works honestly. How exactly should types be provided?

[mksglu]

@jaames I'm not sure for the time being. All I want to do is work. If I do, I will send PR. It's a great package. Thank you.

[jaames]

According docs I think the library just has to provide types with a .d.ts file? A PR would really be appreciated, but I can probably do it myself when I have the time. :)

And thank you for the kind words!

[jaames]

Reopening this. I've been learning Typescript myself recently and I think having official typedefs would be a great idea.

[mksglu]

Reopening this. I've been learning Typescript myself recently and I think having official typedefs would be a great idea.

https://gist.github.com/mksglu/ba4ebff035a16d29a373eb6739ea316d

[jaames]

@mksglu Nice start! Are you okay if I use this as a base for the official typescript defs?

[mksglu]

@jaames yeah, you can use.

[jacob-beltran]

I believe that the @pika/pack library can automagically generate .d.ts files as part of the build/publish process. If it's not to much work to move from rollup to pack it might be useful.

[jaames]

@jacob-beltran pika pack would be perfect if it had more config options, like being able to specify the output directory and the ability to replace constants. Without these things it wouldn't really be ideal to move over from rollup right now.

[jaames]

Just heard about microbundle, it generates UMD and commonJS modules like iro's current setup does, but also .d.ts file if you write in Typescript!

I suppose it might be time to think about porting iro.js to Typescript -- anyone down to help out with that?

[KaanMol]

I don't really like TypeScript tbh, but sure. I have time and if you want to, I can help you. Would you like that?

[jaames]

I've nearly completed the Typescript port, you can find the code over in the typescript branch

I would really appreciate feedback from anyone more knowledgeable about Typescript, since I'm pretty new to it and there's still lots of things I'm unsure about.

My main concerns are the way I had to extend the color picker prop and state types, this seems wrong somehow, yet when I used interfaces with the extend syntax the Typescript compiler just threw me an error? https://github.com/jaames/iro.js/blob/typescript/src/colorPicker.tsx#L22-L30

I'd also like to sure that it exports typedefs properly, because otherwise this would all be rather pointless.

Thanks! :)

[KaanMol]

Hey @jaames,

The reason is that they have to be types. This is a so called intersection type.
https://www.typescriptlang.org/docs/handbook/advanced-types.html

The way you are extending the component class is as far as I am aware correct.
Maybe this will help you:
https://github.com/scurker/preact-and-typescript

[jaames]

Hi @KaanMol

Ah, so it's okay to do type Props = { ... } & SomeOtherProps for Props to inherit from SomeOtherProps? I was unsure because anywhere I see Typescript used with React/Preact I've seen component props defined with interfaces e.g. interface Props {...} and I presumed interface Props {...} extends SomeOtherProps would be more correct.

Also -- Typescript docs are a bit unclear about whether or not I have to declare iro.js as a module somewhere, like

declare module '@jaames/iro' {
  ...
}

Is that necessary for iro.js or is it just used for defining types for libraries written in JS?

Thanks :)

[KaanMol]

Hi @jaames,
Are you sure you cant just change the type to interfaces? Because that would be a better method indeed. It would be interface Props extends SomeOtherProps {...}. Maybe that is what went wrong?

I've did some research about your question, you can declare iro.js as a module. But I assume your bundler already does something like that.
It is used to read which functions are available from the iro.js library.

[jaames]

@KaanMol Yeah, my bad, I mistyped the example in my message

The problem was related to updating a component's state by calling setState with only one property, like setState({ width: 200 }), although I realised that you should merge in the rest of the state object in there so it's fixed :)

The bundler does generate .d.ts files, but there's no declare module in them. I'm not entirely sure if it's important or not.

[KaanMol]

I think we can just let it go for now, and test if the types are loaded correctly. If that isn’t the case, we can just add it.

[jaames]

iro.js 5.0.0 (which is written in Typescript) is now in beta if anybody would like to test it! Obviously I don't recommend using it in production, and documentation is still in progress.

From NPM:

$ npm install @jaames/iro@beta

[jaames]

iro.js 5.0.0 is finally out! Thanks everyone for their help with porting the library to Typescript, I'll be sure to credit you in the readme :)