Using `Component` for typing doesn't allow for any other props outside the required.

[pauldemarco]

Describe the problem

How can I create a function that takes a Component that has at least the foo prop?

/*
* @param modal: any Component that has at least the `foo` prop
*/
function showModal(modal: Component<{foo: string; [key: string]: any}>) {
    // do some things and use `mount`
}

// gives errors if SimpleDialog has any more props than `foo`:
showModal(SimpleDialog)

Repl (doesn't show ts-errors)

REPL

I have also tried attempts at using extends for the type, to no avail.

Importance

i cannot use svelte without it

[7nik]

Isn't it this:

function showModal<Props extends { foo: string }>(modal: Component<Props>) {
    // do some things and use `mount`
}

?

[pauldemarco]

I feel like I tried that 50 different ways. I’ll give it a shot as soon as I’m back!

I also have a slightly more complex situation where “foo” is actually a callback “foo: (v: T) => void” and I’d like the return type of showModal to be Promise<T>

[7nik]

I also have a slightly more complex situation where “foo” is actually a callback “foo: (v: T) => void” and I’d like the return type of showModal to be Promise<T>

function showModal<Props extends { foo: (v: any) => void }>(
  modal: Component<Props>
): Promise<Parameters<Props['foo']>[0]>  {};

I expected it to work, but it fails to infer the T type in the TS playground:

function showModal<T, Props extends { foo: (v: T) => void }>(
  modal: Component<Props>
): Promise<T>  {};

[pauldemarco]

It’s been driving me absolutely nuts. Me and ChatGPT just can’t figure it out!

[dummdidumm]

Moving this to a discussion, since this isn't a bug or feature request