3.3.2: type errors using attribution callbacks about web-vitals HOT 6 CLOSED

Could you please explain how you're seeing this error? I tried creating a new project with the above example snippet in a test.js file and then run the following:

$ npm install [email protected]

changed 1 package, and audited 3 packages in 573ms

found 0 vulnerabilities
$ tsc --strict test.ts        
\test.ts:5:10 - error TS2339: Property 'attribution' does not exist on type 'Metric | CLSMetric | CLSMetricWithAttribution'.
  Property 'attribution' does not exist on type 'Metric'.

5   metric.attribution.largestShiftTarget;
           ~~~~~~~~~~~


Found 1 error in test.ts:5

The same thing with 3.3.2 does not happen:

$ npm install [email protected]

changed 1 package, and audited 3 packages in 678ms

found 0 vulnerabilities
$ tsc --strict test.ts        
$ 

from web-vitals.

@tunetheweb Apologies, there was a typo in my original post. I've corrected it now so hopefully it makes a bit more sense.

To clarify, we're expecting the type of largestShiftTarget to be string | undefined but if you hover over you will see it's unknown.

This is in a brand new project with nothing but the latest versions of typescript and web-vitals.

Here's an adjusted example which generates a type error:

import { onCLS } from "web-vitals/attribution";
onCLS((metric) => {
  // Error: Type 'unknown' is not assignable to type 'string | undefined'.
  const x: string | undefined = metric.attribution.largestShiftTarget;
});

from web-vitals.

OK so it appears you can't just change a type of an interface in Typescript by repeating it. By removing the extends you only have one metric and TypeScript is able to work properly.

However, that causes other problems (web-vitals.js will not build) so the answer appears to be a little trickier.

Can you try the branch from this PR and let me know if that works?
#356

from web-vitals.

That fixes it! 🚀

from web-vitals.

@OliverJAsh I updated the PR with your original suggestion. Not sure why couldn't get your suggestion to work previously but could you double check that branch still works to solve your issue before I merge this to save us having a third attempt at this?

from web-vitals.

Just checked, it still works 😄 Thank you!

from web-vitals.