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();
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();