打字稿中的接口无法识别正确的类型

Question

我正在重写打字稿中的函数。一个被扩展的类有一些方法与另一个命名相同。

为此我创建了接口，但是它抱怨我最后一个函数的返回类型。另外，我不能在我的界面中添加“私有”、“只读”类型等，这是怎么回事？

export default interface SearchDataInterface {
    hasOptionSelected(_selectType: string): boolean;
    getOptionSelected(_selectType: string): HTMLOptionElement;
    getSelectChoosed(_selectType: string): HTMLSelectElement;
}

错误 1

错误

C:\Users\THIAGOSAAD\Documents\DEVELOPMENT\NEORIS\ALIANSCE\appcomercial\build\typescript\components\modals\SearchData.ts
    [tsl] ERROR in C:\Users\THIAGOSAAD\Documents\DEVELOPMENT\NEORIS\ALIANSCE\appcomercial\build\typescript\components\modals\SearchData.ts(62,12)
          TS2416: Property 'getSelectChoosed' in type 'SearchDataModal' is not assignable to the same property in base type 'SearchDataInterface'.
      Type '(_selectType: string) => HTMLSelectElement' is not assignable to type '(_selectType: string) => string'.
        Type 'HTMLSelectElement' is not assignable to type 'string'.

错误 2

'private' modifier cannot appear on a type member.ts(1070)

1 级

import * as $ from 'jquery';
import SearchDataAccordion from '../accordions/SearchData';
import SearchDataInterface from '../../interfaces/SearchData';

export default class SearchDataModal extends SearchDataAccordion implements SearchDataInterface {
    // COMPONENT HTML ELEMENT'S
    private readonly _$modal:        JQuery            = $(`#modal-search-data-component`);
    private readonly _selectOne:     HTMLSelectElement = <HTMLSelectElement>document.getElementById('modal-search-data-select-one');
    private readonly _selectTwo:     HTMLSelectElement = <HTMLSelectElement>document.getElementById('modal-search-data-select-two');
    private readonly _cancelButton:  HTMLButtonElement = <HTMLButtonElement>document.getElementById('modal-search-data-cancel');
    private readonly _confirmButton: HTMLButtonElement = <HTMLButtonElement>document.getElementById('modal-search-data-confirm');

    public constructor() {
        super();
    }

    // METHODS
    public initComponent(): void {
        this.show();
        this.submitForm();
    }

    private submitForm(): void {
        this._confirmButton.addEventListener('click', (_event: MouseEvent) => {
            this.validateForm();
        });
    }

    private validateForm(): void {
        console.log(this.hasOptionSelected('select-one'))
    }

    private show(): void {
        if (!super.hasOptionSelected('select-one') && !super.hasOptionSelected('select-two')) {
            this._$modal.modal('show');
        }
    }

    private hide(): void {
        this._$modal.modal('hide');
    }

    public hasOptionSelected(_selectType: string): boolean {
        return this.getOptionSelected(_selectType) !== undefined ? true : false;
    }

    public getOptionSelected(_selectType: string): HTMLOptionElement {
        const SELECT_ELEMENT = this.getSelectChoosed(_selectType),
              SELECT_ELEMENT_OPTIONS = SELECT_ELEMENT.options;

        for (const KEY in SELECT_ELEMENT_OPTIONS) {
            if (SELECT_ELEMENT_OPTIONS.hasOwnProperty(KEY)) {
                const OPTION_ELEMENT = SELECT_ELEMENT_OPTIONS[KEY];

                if (OPTION_ELEMENT.selected && OPTION_ELEMENT.value !== 'null') {
                    return OPTION_ELEMENT;
                }
            }
        }
    }

    public getSelectChoosed(_selectType: string): HTMLSelectElement {
        switch(_selectType) {
            case 'select-one':
                return this.__selectOne;
            case 'select-two':
                return this.__selectTwo;
            default: 
                console.warn('DO NOT EXIST THIS SELECT ON THE COMPONENT!');
                break;
        }
    }
}

2 级

import HelpersMethodsController from '../../controllers/HelpersMethods';
import SearchDataInterface      from '../../interfaces/SearchData';

export default class SearchDataAccordion implements SearchDataInterface {
    protected readonly __button:    HTMLButtonElement = <HTMLButtonElement>document.getElementById('card-accordion-search-data-button');
    protected readonly __selectOne: HTMLSelectElement = <HTMLSelectElement>document.getElementById('card-accordion-search-data-select-one');
    protected readonly __selectTwo: HTMLSelectElement = <HTMLSelectElement>document.getElementById('card-accordion-search-data-select-two');

    public initComponent(): void {
        try {
            this.disableSelect('select-one');
            this.disableSelect('select-two'); 
        } catch (error) {
            console.warn(error);
        }
    }

    public renderButtonText(_value: any): void {
        if (Array.isArray(_value)) {
            const FIRST_VALUE  = HelpersMethodsController.truncateText(_value[0]),
                  SECOND_VALUE = HelpersMethodsController.truncateText(_value[1]);

            if (_value.length === 1) {
                this.__button.innerHTML = `${FIRST_VALUE}`;
            } else if(_value.length === 2) {
                this.__button.innerHTML = `${FIRST_VALUE}, ${SECOND_VALUE}`;
            } else if(_value.length > 2) {
                this.__button.innerHTML = `${FIRST_VALUE}, ${SECOND_VALUE} <span class="badge" data-element-type="counter-data">+ ${_value.length - 2}</span>`
            }
        } else {
            this.__button.innerHTML = _value;
        }
    }

    public enableSelect(_selectType: string): void {
        this.getSelectChoosed(_selectType).disabled = false;
    }

    public disableSelect(_selectType: string): void {
        this.getSelectChoosed(_selectType).disabled = true;
    }

    public hasOptionSelected(_selectType: string): boolean {
        return this.getOptionSelected(_selectType) !== undefined ? true : false;
    }

    public getOptionSelected(_selectType: string): HTMLOptionElement {
        const SELECT_ELEMENT = this.getSelectChoosed(_selectType),
              SELECT_ELEMENT_OPTIONS = SELECT_ELEMENT.options;

        for (const KEY in SELECT_ELEMENT_OPTIONS) {
            if (SELECT_ELEMENT_OPTIONS.hasOwnProperty(KEY)) {
                const OPTION_ELEMENT = SELECT_ELEMENT_OPTIONS[KEY];

                if (OPTION_ELEMENT.selected && OPTION_ELEMENT.value !== 'null') {
                    return OPTION_ELEMENT;
                }
            }
        }
    }

    public getSelectChoosed(_selectType: string): string {
        switch(_selectType) {
            case 'select-one':
                return this.__selectOne.id;
            case 'select-two':
                return this.__selectTwo.id;
            default: 
                console.warn('DO NOT EXIST THIS SELECT ON THE COMPONENT!');
                break;
        }
    }
 }

Answer 1

您的基类SearchDataAccordion 没有正确实现SearchDataInterface。

public getSelectChoosed(_selectType: string): string { ...

与

冲突

getSelectChoosed(_selectType: string): HTMLSelectElement;

这应该是第一个要修复的错误。

您的SearchDataModal 必须与它扩展的类SearchDataAccordion 具有相同的接口，其中包括方法getSelectedChoosed 返回一个string，它再次与接口SearchDataInterface 冲突。

将SearchDataAccordion 中的getSelectedChoosed 更改为以下内容应该可以解决问题。

public getSelectChoosed(_selectType: string): HTMLSelectElement {
        switch(_selectType) {
            case 'select-one':
                return this.__selectOne;
            case 'select-two':
                return this.__selectTwo;
            default: 
                console.warn('DO NOT EXIST THIS SELECT ON THE COMPONENT!');
                break;
        }
    }