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>  {};

[dummdidumm]

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

[pauldemarco]

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

^^ I think this actually worked. Wow, the Parameters utility type might have been the trick.

I also expected this to work but it doesn't, too bad since it's way more readable:

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

[pauldemarco]

This is allowing for the Component to be missing foo.

[7nik]

No, you should get an error like Property 'foo' is missing in type '{ ... }' but required in type '{ foo: (v: unknown) => void; }'

[pauldemarco]

Not for me. I am seeing the following when passing a component named SimpleDialog:
SimpleDialog has no props (unknown ReturnType) <-- not erroring but it should
SimpleDialog has only the foo prop (ReturnType T) <-- good
SimpleDialog has foo and bar prop (ReturnType T) <-- good

[7nik]

Hm, well, P extends { foo: (v: any) => void } should solve this, but then it doesn't look any better than that one with Parameters.

[pauldemarco]

Hmm can’t seem to get that working either. The one with “Parameters” is working great though.

[pauldemarco]

@dummdidumm Feature request for documentation:

/**
 * Convenience type to get the props the given component expects.
 *
 * Example: Ensure a variable contains the props expected by `MyComponent`:
 *
 * ```ts
 * import type { ComponentProps } from 'svelte';
 * import MyComponent from './MyComponent.svelte';
 *
 * // Errors if these aren't the correct props expected by MyComponent.
 * const props: ComponentProps<MyComponent> = { foo: 'bar' };
 * ```
 *
 * Example: A generic function that accepts some component and infers the type of its props:
 *
 * ```ts
 * import type { Component, ComponentProps } from 'svelte';
 * import MyComponent from './MyComponent.svelte';
 *
 * function withProps<TComponent extends Component<any>>(
 * 	component: TComponent,
 * 	props: ComponentProps<TComponent>
 * ) {};
 *
 * // Errors if the second argument is not the correct props expected by the component in the first argument.
 * withProps(MyComponent, { foo: 'bar' });
 * ```
 */
export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
	Comp extends SvelteComponent<infer Props>
		? Props
		: Comp extends Component<infer Props, any>
			? Props
			: never;

Considering the withProps function:
The Component must have the props, and only those props, from the second argument, but what if we want the Component to have at least those props?

I think it would be beneficial to offer such an example in the documentation alongside withProps, i.e. withOnlyProps & withProps.