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)

CLASS 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;
        }
    }
}

CLASS 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再次与接口{{1 }}。

将SearchDataInterface中的getSelectedChoosed更改为以下内容即可解决问题。

SearchDataAccordion

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

1 个答案: