typed SvelteComponent(Dev) interface (#5431)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Add a typed `SvelteComponent` interface ([#5431](https://github.com/sveltejs/svelte/pull/5431))
 * Fix setting reactive dependencies which don't appear in the template to `undefined` ([#5538](https://github.com/sveltejs/svelte/issues/5538))
 * Support preprocessor sourcemaps during compilation ([#5584](https://github.com/sveltejs/svelte/pull/5584))
 * Fix ordering of elements when using `{#if}` inside `{#key}` ([#5680](https://github.com/sveltejs/svelte/issues/5680))

src/runtime/internal/Component.ts

@@ -212,16 +212,19 @@ if (typeof HTMLElement === 'function') {
 	};
 }
 
-export class SvelteComponent {
+export class SvelteComponent<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any
+> {
 	$$: T$$;
-	$$set?: ($$props: any) => void;
+	$$set?: ($$props: Partial<Props>) => void;
 
 	$destroy() {
 		destroy_component(this, 1);
 		this.$destroy = noop;
 	}
 
-	$on(type, callback) {
+	$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void) {
 		const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
 		callbacks.push(callback);
 
@@ -231,7 +234,7 @@ export class SvelteComponent {
 		};
 	}
 
-	$set($$props) {
+	$set($$props: Partial<Props>) {
 		if (this.$$set && !is_empty($$props)) {
 			this.$$.skip_bound = true;
 			this.$$set($$props);

src/runtime/internal/dev.ts

@@ -97,15 +97,44 @@ export function validate_slots(name, slot, keys) {
 	}
 }
 
-type Props = Record<string, any>;
+export interface SvelteComponentDev<
-export interface SvelteComponentDev {
+	Props extends Record<string, any> = any,
-	$set(props?: Props): void;
+	Events extends Record<string, any> = any,
-	$on<T = any>(event: string, callback: (event: CustomEvent<T>) => void): () => void;
+	Slots extends Record<string, any> = any
+> {
+	$set(props?: Partial<Props>): void;
+	$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
 	$destroy(): void;
 	[accessor: string]: any;
 }
 
-export class SvelteComponentDev extends SvelteComponent {
+export class SvelteComponentDev<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> extends SvelteComponent<Props, Events> {
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$prop_def: Props;
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$events_def: Events;
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$slot_def: Slots;
+
 	constructor(options: {
 		target: Element;
 		anchor?: Element;
@@ -113,7 +142,7 @@ export class SvelteComponentDev extends SvelteComponent {
 		hydrate?: boolean;
 		intro?: boolean;
 		$$inline?: boolean;
-    }) {
+	}) {
 		if (!options || (!options.target && !options.$$inline)) {
 			throw new Error("'target' is a required option");
 		}