使用公共道具的類繼承-使用TypeScript的通用類注釋-有解無憂

我需要以下示例的幫助。我有帶有 props 屬性的主類組件和一些子組件。我應該如何正確撰寫注釋以便可以以這種方式繼承物件 - 即使在多個級別上？甚至有可能做到嗎？

我無法將第三類和其他類的特征傳遞下去。該special屬性仍然是指IButtonProps而不是ISpecialButtonProps。

非常感謝。

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

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490605.html

標籤：javascript 打字稿仿制药注释

上一篇：有沒有辦法使用單個代碼制作每個bouton

下一篇：無法在JavaScript中按版本號對物件陣列進行排序