Type 'Element | null | undefined' is not assignable to type 'ISliderElement'

Question

Так нет ошибок

private addListenersToThumbs(settings: ISettings) {
  let from: HTMLElement | null | undefined;;
  let to: HTMLElement | null | undefined;;

  if (settings.isTwoRunners === true) {
    from = this.slider ? .querySelector('.range-slider__thumb_from');
  }
  to = this.slider ? .querySelector('.range-slider__thumb_to');
}

Если выношу типы в интерфейс

interface ISliderElement {
  from: HTMLElement | null | undefined;
  to:   HTMLElement | null | undefined;
}

private addListenersToThumbs(settings: ISettings) {
    
  let from: ISliderElement;
  let to:   ISliderElement;

  if (settings.isTwoRunners === true) {
    from = this.slider?.querySelector('.range-slider__thumb_from');
  }
  to = this.slider?.querySelector('.range-slider__thumb_to');
}

то на from и to получаю такую ошибку

Type 'Element | null | undefined' is not assignable to type 'ISliderElement'. Type 'undefined' is not assignable to type 'ISliderElement'.ts(2322)

Почему она возникает и как это исправить?

Answer 1

интерфейс ISliderElement описывает объект с двумя полями from и to.

А используется для отдельного поля.

Вместо этого можно создать переменную с полями:

let range: ISliderElement = {to:undefined, from:undefined};

if (settings.isTwoRunners === true) {
  range.from = this.slider?.querySelector('.range-slider__thumb_from');
}
range.to = this.slider?.querySelector('.range-slider__thumb_to');

Либо объявить тип для конкретного поля

type ISliderElement = HTMLElement | null | undefined;

let from: ISliderElement;
let to:   ISliderElement;

БЛОГ НА HUSL

Type 'Element | null | undefined' is not assignable to type 'ISliderElement'

Ответы (1 шт):