HTMLAudioЭлемент как JS Аудио

#html #typescript

Вопрос:

У меня есть аудио, которое я загружаю с помощью HTML:

 <audio>
    <source src="file.ogg" />
    <source src="file.mp3" />
</audio>
 

Я также расширил прототип, чтобы создать новую функцию:

 Audio.prototype.restart = function(){
    this.pause();
    this.currentTime = 0;
    this.play();
}
 

Однако, когда я извлекаю аудиоэлемент, typescript не распознает его как экземпляр аудио:

 let file = document.querySelector("audio")! as Audio;

file.restart()
 

Я получаю две ошибки:

«Аудио» относится к значению, но здесь используется как тип. Вы имели в виду «тип аудио»? ts(2749)

Свойство «перезапуск» не существует для типа «HTMLAudioElement» .ts(2339)

Как мне это исправить?

Ответ №1:

Вам нужно

  • Сообщите TS, что restart функция теперь существует в HTMLAudioElements
  • Скажите TS, что querySelector('audio') он вернет HTMLAudioElement, что можно сделать с помощью дженериков
 interface HTMLAudioElement {
    restart: () => void;
}
Audio.prototype.restart = function(){
    this.pause();
    this.currentTime = 0;
    this.play();
}
let file = document.querySelector<HTMLAudioElement>("audio")!;

file.restart()
 

«Аудио» относится к значению, но здесь используется как тип.

возникает, потому что аудио — это конструктор-значение.

 console.log(typeof Audio);