Correct typings for themr

[odensc]

No description provided.

[mpodlasin]

Hi.
@TheSBros Are those working for you? With TS 2.1, using these typings if I declare state of my decorated component to something else than void | {}, I get following error:

ERROR in ./src/components/NewTask/NewTask.tsx
(19,1): error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ThemedComponent<NewTaskProps>' is not assignable to type 'typeof NewTask'.
    Type 'Component<NewTaskProps, ComponentState>' is not assignable to type 'NewTask'.
      Types of property 'state' are incompatible.
        Type 'ComponentState' is not assignable to type '{ state: string; }'.
          Type 'void' is not assignable to type '{ state: string; }'.

It is happening because in definition of React.ComponentClass state is defined precisely as void | {}, which makes sense, since you do not want to expose definition of your state externally, but in this case it results in error.

Thanks in advance and have great day!

[javivelasco]

Can anybody confirm this update is properly done to merge?

[odensc]

Just commited a fix. Let me know if it works @Podlas29.

Only caveat is calling getWrappedInstance() won't return the type of the original component, it will return React.Component<OriginalP, OriginalS>. You can still cast it to the correct type. If you know how to fix that @Podlas29, tell me :)

[mpodlasin]

still will not work if component accepts some props or context through constructor.

consturctor(props: MyProps) {}

Adding

new(props?: P, context?: any)

will help.
After that for me it works perfect.

[odensc]

Should be fixed. :)

[mpodlasin]

Well I did get around all problems (both state type and wrong instance being returned in getWrappedComponent with following code:

interface ThemedComponent<P, S, Base> extends React.Component<P, S> {
    getWrappedInstance(): Base;
}

interface ThemedComponentClass<P, S, Base> extends React.ComponentClass<P> {
    new(props?: P, context?: any): ThemedComponent<P, S, Base>;
}

export interface Themr {
    (
        identifier: string,
        defaultTheme?: {},
        options?: IThemrOptions
    ): <P, S, C extends new(props?: P, context?: any) => React.Component<P, S>>
        (component: C) => ThemedComponentClass<P, S, C>;
}

It got really ugly thought. ;)

[odensc]

It got really ugly thought.

That's fine, it seems to be the only way to do it. I tried something like that but couldn't get it working.

Thanks, updated with your code. Look good?

[mpodlasin]

One more thing - I just do not know - is it OK to pass stateless components to themr decorator? If so, I would add such possibility to typings.

[odensc]

I'm not sure, - @javivelasco would have to confirm. However you can't even use decorators on functions; such as a stateless component.

[mpodlasin]

Well decorator is simply a function. In mobx for example you can use both

@observer
class Component extends React.Component ...

and

observer(props => ...)

In our case it would be

themr('MyName')(props => ...)

Much cleaner if you do not need state.

[odensc]

That's true, looking at the code I'm not sure if it would work with stateless components.. We'll have to see.

[mpodlasin]

@TheSBros Also my code seems problematic as well - typescript is unable to infer P and S and assumes they are {} which makes adding props to decorated component impossible.
Currently your version (before last commit) seems to be the best. Casting wrappedInstance is probably better then explicitly typing every decorated component.

[javivelasco]

@Podlas29 You can use the decorator in a functional component but the legacy syntax is valid only for classes. At the end it's just a function returning another function

[odensc]

@javivelasco should be ready to merge now. Would recommend to squash to clean up the mess.

[javivelasco]

Thanks!

[raveclassic]

Seems like now there's a conflict with render method when strictNullChecks flag is set:

@themr('foo') //error - Type 'null' is not assignable to type 'Element'
class FooClass extends React.Component<any, any> {
	render()/*: JSX.Element | null //ok when uncommented*/ {
		return <div>hi</div>;
	}
}

[raveclassic]

Moreover, decorating a class with @themr complains on every lifecycle method (like componentWillMount) of decorating class as TS can't cast it to as ComponentClass. On the other hand, calling themr as a function on existing class works fine - seems like decorators are broken in TS.