Typed SvelteComponent interface

sveltejs/rfcs#37

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> & Record<string, any>) => void;
 
 	$destroy() {
 		destroy_component(this, 1);
 		this.$destroy = noop;
 	}
 
-	$on(type, callback) {
+	$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: CustomEvent<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> & Record<string, any>) {
 		if (this.$$set && !is_empty($$props)) {
 			this.$$.skip_bound = true;
 			this.$$set($$props);

src/runtime/internal/dev.ts

@@ -97,23 +97,52 @@ export function validate_slots(name, slot, keys) {
 	}
 }
 
-type Props = Record<string, any>;
-export interface SvelteComponentDev {
-	$set(props?: Props): void;
-	$on<T = any>(event: string, callback: (event: CustomEvent<T>) => void): () => void;
+export interface SvelteComponentDev<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> {
+	$set(props?: Partial<Props> & Record<string, any>): void;
+	$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: CustomEvent<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;
-		props?: Props;
+		props?: Props & Record<string, any>;
 		hydrate?: boolean;
 		intro?: boolean;
 		$$inline?: boolean;
-    }) {
+	}) {
 		if (!options || (!options.target && !options.$$inline)) {
 			throw new Error(`'target' is a required option`);
 		}