• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

55
Views
Class inheritance with common props - generic class annotations with TypeScript

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();
9 months ago · Santiago Gelvez
1 answers
Answer question

0

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();
9 months ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.