Inheritance of React.Component in TypeScript

Question

I'm trying to create a base class from React.Component and two classes from the base class like this:

interface BaseItemProps {
    base_prop: string;
}

class BaseItem<P, T> extends React.Component<BaseItemProps, any> {
}

class ItemClass1 extends BaseItem<BaseItemProps, any> {
}


interface ItemProps extends BaseItemProps {
    item_prop: string;
}

class ItemClass2 extends BaseItem<ItemProps, any> {
}

The problem is that class ItemClass2 doesn't see this.props as ItemProps but as BaseItemProps (this.props.item_prop is not available). What am I doing wrong?

Answer 1

You are not flowing the type for properties to React.Component , P needs to be passed to React.Component , you can use a constraint to ensure it extends BaseItemProps

class BaseItem<P extends BaseItemProps, T> extends React.Component<P, any> {
}