Loosing generic type of component while using withStyles() HOC

[sergeyzwezdin]

Describe the bug:
I have React & TypeScript project where JSS is used.

Here is a simple component:

import React, { Component } from 'react';

type TestProps<T> = {
	data?: T[];
	onClick?: (item: T) => void;
};

class Test<T> extends Component<TestProps<T>> {
	render() {
		return <></>;
	}
}

export default Test;

If I check the types that compiled from this code it would be:

import { Component } from 'react';
declare type TestProps<T> = {
    data?: T[];
    onClick?: (item: T) => void;
};
declare class Test<T> extends Component<TestProps<T>> {
    render(): JSX.Element;
}
export default Test;

So everything is OK here.

Now I want to add JSS styles here, so I change the component following way:

import React, { Component } from 'react';
import withStyles, { WithStylesProps } from 'react-jss';

import { JssStyle } from 'jss';

type CssStyles = 'root';
type ICssStyles = Record<CssStyles, JssStyle>;

const styles: ICssStyles = {
	root: {
		color: 'red'
	}
};

type TestProps<T> = {
	data?: T[];
	onClick?: (item: T) => void;
} & WithStylesProps<ICssStyles>;

class Test<T> extends Component<TestProps<T>> {
	render() {
		return <>...</>;
	}
}

export default withStyles(styles)(Test);

Once withStyles HOC is applied to the component, we lose T type and it's going to be unknown:

import React from 'react';
import { WithStylesProps } from 'react-jss';
import { JssStyle } from 'jss';
declare type CssStyles = 'root';
declare type ICssStyles = Record<CssStyles, JssStyle>;
declare type TestProps<T> = {
    data?: T[];
    onClick?: (item: T) => void;
} & WithStylesProps<ICssStyles>;
declare const _default: React.ComponentType<Pick<TestProps<unknown>, "data" | "onClick"> & {
    classes?: Partial<Record<"root", string>> | undefined;
}>;
export default _default;

Expected behavior:
We should be able to use the generic parameter of the component after applying withStyles HOC.

Versions (please complete the following information):

• jss: 10.1.1
• react-jss: 10.1.1
• Browser [e.g. chrome, safari]: Chrome
• OS [e.g. Windows, macOS]: macOS

[sergeyzwezdin]

Any plans to fix this?

[kof]

@cssinjs/typescript didn't we fix it in the recent release?

[ITenthusiasm]

@kof @sergeyzwezdin If it's truly an issue related to withStyles, then it should be fixed in the latest release as long as the Styles type is properly used.

But giving a quick look at this, I don't think it's related to ReactJSS at all. It's likely a misapplication of TypeScript.

In TypeScript you really have to be careful with how you handle generics. If you have a generic type that relies on an outer generic type's implementation, TypeScript can get confused really easily.

Note that at the moment withStyles is called, it's not called with Test<T>. It's called with a Test class that was given no generic type parameter. This is likely the source of the problem.

[ITenthusiasm]

Yup. Just decided to play with this in a random react-redux-typescript code sandbox. The same issue occurs when trying to run connect(mapState, mapDispatch)(GenericClassComponent). This is definitely a misapplication of TypeScript. It has no idea what T is at the moment when the HOC wraps the passed component, so T becomes unknown.

Unfortunately, you also don't have the option of passing Test<T> to the higher order component. It's possible that what you were trying to do with TS either isn't possible or should be approached in a different way. In any case, this isn't due to a flaw in ReactJSS or TypeScript.

[ITenthusiasm]

@kof As I mentioned previously, the issue here is with the application of TypeScript, not React-JSS. This issue hasn't seen activity for more than a week since the previous comment. I think it's safe to close this, but it's up to you.

[kof]

alright, closing this one, hope we can address it through documentation