TypeScript ругается на getAttribute('href'). Как получить href ссылки?

Question

[IliaMal]

Здравствуйте.

На проекте переносим javascript на typescript для строгой типизации.

Столкнулся с проблемой, что не могу получить href ссылки:

const popupLink = this.popupLinks[index] as HTMLAnchorElement;
                popupLink.addEventListener("click", (e: Event) => {

                    const popupName = e.getAttribute('href').replace('#', '')!;
                
                });

Ругается, что getAttribute не существует в типе Event, попробовал вызвать через e.target, ошибка меняется на "не существует в типе EventTarget".

Как решить проблему?

Comments

[Василий Банников]

А откуда у div взялся href?

[IliaMal]

Василий Банников, это я не доглядел, там, конечно, <a>. Поменял на HTMLAnchorElement, но проблема осталась. (

Answer 1

[Aetae]

Ради ускорения сборки из коробки не предусмотрено сложной типизации событий. Одно время события имели сложную типизацию на дженериках, но оную вкинули из ts. (Что весьма меня расстраивает, могли бы и оставить как отдельную настройку, для тех кому плавная типизация важнее скорости.)

Тебе остаётся только кастовать типы руками, увы. Причём рекомендую в данном случае использовать currentTarget а не target, потому что target может оказаться например span внутри этой ссылки, а не она сама.

Comments

[IliaMal]

Спасибо.
Так как мне нужен якорь ссылки, записал в таком виде:

popupLink.addEventListener("click",  (e: Event) => {
                    
        const el = e.currentTarget as HTMLAnchorElement;
        if(el.hash){
             const popupName = el.hash.replace('#', '');
                        
             e.preventDefault();
        }
                    
});