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?

Titian Cernicova-Dragomir · Accepted Answer · 2018-02-20 15:18:59Z

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> {
}

answered Feb 20, 2018 at 15:18

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Inheritance of React.Component in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related