Class inheritance with common props - generic class annotations with TypeScript-CodePudding

I need help with following example. I have main class Component with props property and some child components. How should I correctly write annotations so that it is possible to inherit objects in this way - even at several levels? Is it even possible to do?

I cannot pass on the characteristics from the third and other class. The special property still refers to IButtonProps instead of ISpecialButtonProps.

Many thanks.

interface IProps {
    parent?: any
}

class Component<T1> {
    protected props: T1;
    constructor(props: T1) {
        this.props = props;
    }
}

interface IButtonProps extends IProps {
    caption?: string
}

class Button<T1> extends Component<IButtonProps> {
    constructor(props: T1) {
        super(props);
//        props.parent = 'x';
//        props.caption = 'y';
    }
    test(): void {
        console.log(this.props.parent);
        console.log(this.props.caption);
    }
}

interface ISpecialButtonProps extends IButtonProps {
    special?: string
}

class SpecialButton<T2> extends Button<ISpecialButtonProps> {
    constructor(props: T2) {
        super(props);
//        this.props.parent = 'a';
//        this.props.caption = 'b';
//        this.props.special = 'c';
    }
    test(): void {
        console.log(this.props.caption);
        console.log(this.props.special); // Property 'special' does not exist on type 'IButtonProps'
    }
}


let button1 = new SpecialButton({caption: 'x', special: 'y'});
button1.test();

CodePudding user response：

interface IProps {
  parent?: any;
}

class Component<T1> {
  protected props: T1;

  constructor(props: T1) {
    this.props = props;
  }
}

interface IButtonProps extends IProps {
  caption?: string;
}

class Button<T1> extends Component<IButtonProps & T1> { // diff
  constructor(props: T1) {
    super(props);
    //        props.parent = 'x';
    //        props.caption = 'y';
  }

  test(): void {
    console.log(this.props.parent);
    console.log(this.props.caption);
  }
}

interface ISpecialButtonProps extends IButtonProps {
  special?: string;
}

class SpecialButton<T2> extends Button<ISpecialButtonProps & T2> { // diff
  constructor(props: T2) {
    super(props);
    //        this.props.parent = 'a';
    //        this.props.caption = 'b';
    //        this.props.special = 'c';
  }

  test(): void {
    console.log(this.props.caption);
    console.log(this.props.special); // Property 'special' does not exist on type 'IButtonProps'
  }
}

const button1 = new SpecialButton({ caption: "x", special: "y" });
button1.test();