Error: '?' expected. ts(1005)

[shut gust]

I have a simple function that looks like this:

const eventHandler = (e: CustomEvent extends {detail: string} ) => {
  logEvent(e.name, { value: e.detail });
};

and I'm getting an Error: '?' expected. (ts). VSCode underlines the last parenthesis ) before the error in red 😫 . How do I fix this?

[balmy cradle]

extends isn't valid there.

[shut gust]

ah ok

[balmy cradle]

Perhaps you want CustomEvent & { detail: string }.

[shut gust]

I'd like it to be a CustomEvent but I'd like it to also have a details property.

[shut gust]

This gives me:

Argument of type '(e: CustomEvent & {    name: string;    detail: string;}) => void' is not assignable to parameter of type '(e: CustomEvent<any>) => void'.
  Types of parameters 'e' and 'e' are incompatible.
    Type 'CustomEvent<any>' is not assignable to type 'CustomEvent<any> & { name: string; detail: string; }'.
      Property 'name' is missing in type 'CustomEvent<any>' but required in type '{ name: string; detail: string; }'.ts(2345)
const eventHandler: (e: CustomEvent & {
    name: string;
    detail: string;
}) => void

[spring dove]

CustomEvent<string> & { name: string }
the generic is used for the detail type

[shut gust]

error

Argument of type '(e: CustomEvent<string> & {    name: string;}) => void' is not assignable to parameter of type '(e: CustomEvent<any>) => void'.
  Types of parameters 'e' and 'e' are incompatible.
    Type 'CustomEvent<any>' is not assignable to type 'CustomEvent<string> & { name: string; }'.
      Property 'name' is missing in type 'CustomEvent<any>' but required in type '{ name: string; }'.ts(2345)
const eventHandler: (e: CustomEvent<string> & {
    name: string;
}) => void

[spring dove]

where

[shut gust]

where?

[last saddle]

The issue is the place you're assigning doesn't claim to have a name property attached to the error.