Type error: Property 'currentTime' does not exist on type 'EventTarget & HTMLInputElement'

Question

I am currently using TypeScript in a nextJS project. I am using a cdn version of flowplayer asynchronously, and it extends the event.target with new attributes.

The problem is when I try to build I get the error: Type error: Property 'currentTime' does not exist on type 'EventTarget & HTMLInputElement'.

I need to intersect it with these attributes: currentTime, duration, opts. This is what I tried doing:

type FlowPlayerEvent<T extends EventTarget> = Event & {
target: T;
currentTime: Number;
duration: Number;
opts: Object;
};

This is my event handler

function stateHandler(ev : Event) {
const Event: FlowPlayerEvent = ev.target;
if (ev.type === 'pause') { console.log('paused'); }
if (ev.type === 'playing') { console.log(`Playing at ${Event.currentTime}, duration is: ${Event.duration}, video ID is: ${Event.opts.metadata.id}`); }
if (ev.type === 'timeupdate') { console.log(Event.currentTime); }
if (ev.type === 'ended') { console.log('The end'); }

}

When I hover over FlowPlayerEvent this is what I get: Generic type 'FlowPlayerEvent' requires 1 type argument(s).ts(2314)

What's the correct way to extend it in this case?

Thanks in advance!

`const Event: FlowPlayerEvent = ev.target;` You seem confused about what is the event and what is the target. I'm not familiar with flowplayer. Does it have typescript types? Is the target supposed to be an `HTMLVideoElement` or something else? — Linda Paiste, Apr 08 '21 at 19:03

score 2 · Accepted Answer · answered Apr 08 '21 at 19:18

You are getting confused between the event and the event target. The currentTime and duration properties exist on the target element, not the event. These are both properties of the native HTMLVideoElement. opts seems to be added by flowplayer so that's harder tp type.

I'm not familiar with flowplayer so I am having to look at the docs. I'm not sure if typescript types already exist for this package. For just the properties that you are using right here, this should work:

type FlowPlayerElement = HTMLVideoElement & {
    opts: {
        metadata: {
            id: string;
        }
    }
}

type FlowPlayerEvent = Event & {
    target: FlowPlayerElement;
};

function stateHandler(ev: FlowPlayerEvent) {
    const target = ev.target;
    if (ev.type === 'pause') { console.log('pausado'); }
    if (ev.type === 'playing') { console.log(`Tocando em ${target.currentTime} e a duração é: ${target.duration} e o id do vídeo: ${target.opts.metadata.id}`); }
    if (ev.type === 'timeupdate') { console.log(target.currentTime); }
    if (ev.type === 'ended') { console.log('Fim'); }
}

score 0 · Answer 2 · answered Apr 08 '21 at 19:26

0

What's the correct way to extend it in this case?

const Event: FlowPlayerEvent<MyType> = ev.target;

So you have to pass in a type argument.

answered Apr 08 '21 at 19:26

Zoltán Dobrovolni

161
4

score 0 · Answer 3 · answered Oct 01 '21 at 05:16

0

try this instead

function stateHandler(ev: React.ChangeEvent<HTMLVideoElement>) {
    const target = ev.target;
    if (ev.type === 'pause') { console.log('pausado'); }
    if (ev.type === 'playing') { console.log(`Tocando em ${target.currentTime} e a duração é: ${target.duration} e o id do vídeo: ${target.opts.metadata.id}`); }
    if (ev.type === 'timeupdate') { console.log(target.currentTime); }
    if (ev.type === 'ended') { console.log('Fim'); }
}

answered Oct 01 '21 at 05:16

Roman Kotenko

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 01 '21 at 06:19

Type error: Property 'currentTime' does not exist on type 'EventTarget & HTMLInputElement'

3 Answers3