CODEWITHSUNDEEP
javascriptangulartypescriptmodel-viewer
sistemas13
sistemas13

Reputation: 35

Property 'detail' does not exist on type 'ProgressEvent<EventTarget>' Typescript

I have a project in Angular and integrate the 3d model viewer from modelviewer.dev I´m tying to capture a custom event developed from them, and this is the code:

modelViewerload.addEventListener('progress', (ev) => {
        const totalProgress1 = ev.detail;
        console.log(totalProgress1);
        progress.classList.toggle('show', totalProgress1! < 1);
        bar.style.transform = `scaleX(${totalProgress1})`;
    } );

The error says that property detail dont exist in the event, but when I print in console the event, this is result:

CustomEvent {isTrusted: false, detail: {…}, type: 'progress', target: model-viewer#test, currentTarget: model-viewer#test, …} isTrusted : false bubbles : false cancelBubble : false cancelable : false composed : false currentTarget : null defaultPrevented : false detail : {totalProgress: 1} eventPhase : 0 path : (9) [model-viewer#test, div.d3, div.contenedor, app-colorvisualizer, app-root, body, html, document, Window] returnValue : true srcElement : model-viewer#test target : model-viewer#test timeStamp : 6277.899999856949 type : "progress" [[Prototype]] : CustomEvent

Clearly exist the property detail, but typescript don´t admit it and this is the error Property 'detail' does not exist on type 'ProgressEvent'. I wonder if this have a solution or not.

I tried to put this: ev.detail? and also tried ev.detail! and this not resolve the problem.

Upvotes: 0

Views: 1202

Answers (1)

Joel Davey
Joel Davey

Reputation: 2603

You can fix your issue using the built-in CustomEvent type

modelViewerload.addEventListener('progress', (ev:CustomEvent) => {
        const totalProgress1 = ev.detail;
        console.log(totalProgress1);
        progress.classList.toggle('show', totalProgress1! < 1);
        bar.style.transform = `scaleX(${totalProgress1})`;
    } );

You could also extend it

interface MyCustomEvent extends CustomEvent {
  detail:number
}

Upvotes: 0

Related Questions