[@smui/common] TypeError for projects with exactOptionalPropertyTypes: true

[marekdedic]

Describe the bug
Hello, I have a TS project using SMUI and I want to turn on the exactOptionalPropertyTypes tsconfig option. The trouble is, since SMUI distributes TS source files, those get checked by the TS compiler as well, so the extra check gets applied to them as well... and it fails.

I would like to stress that this is not a false positive - the extra check uncovers what is really a potential issue in @smui/common. See the following line:

svelte-material-ui/packages/common/src/internal/dispatch.ts

Lines 15 to 18 in 19ea8ed

	const event: CustomEvent<T> = new CustomEvent(eventType, {
	...eventInit,
	detail,
	});

Here the new CustomEvent infers its T type from the type of the detail property - which with the extra check is more strictly inferred as T | undefined - this is IMHO correct, because the property is marked as optional in the function signature...

To Reproduce
Steps to reproduce the behavior:

1. Use @smui/common in a project (install it from NPM)
2. Turn on exactOptionalPropertyTypes

Expected behavior
No error

Actual behavior

/home/user/project/node_modules/@smui/common/src/internal/dispatch.ts:15:9
Error: Type 'CustomEvent<T | undefined>' is not assignable to type 'CustomEvent<T>'.
  Type 'T | undefined' is not assignable to type 'T'.
    'T | undefined' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'unknown'.
      Type 'undefined' is not assignable to type 'T'.
        'undefined' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'unknown'.
  }
  const event: CustomEvent<T> = new CustomEvent(eventType, {
    ...eventInit,


/home/user/project/node_modules/@smui/common/src/internal/dispatch.ts:21:11
Error: Type 'CustomEvent<T | undefined>' is not assignable to type 'CustomEvent<T>'.
  if (duplicateEventForMDC && eventType.startsWith('SMUI')) {
    const duplicateEvent: CustomEvent<T> = new CustomEvent(
      eventType.replace(/^SMUI/g, () => 'MDC'),

Desktop (please complete the following information):

• OS: Ubuntu 22.04

[marekdedic]

I tried fixing it, an easy fix would be to replace T with T | undefined i these two lines:

svelte-material-ui/packages/common/src/internal/dispatch.ts

Line 15 in 19ea8ed

const event: CustomEvent<T> = new CustomEvent(eventType, {

svelte-material-ui/packages/common/src/internal/dispatch.ts

Line 21 in 19ea8ed

const duplicateEvent: CustomEvent<T> = new CustomEvent(

• but I think you would probably want to turn this option on in your tsconfig as well? And I don't really know if this fix captures the semantics of what you want to do...