Use ContextKey<T> to type setContext, getContext and hasContext

[olehmisar]

Describe the problem

Currently getContext returns unknown if no explicit type is provided.

Describe the proposed solution

Taking inspiration from svelte-typed-context, getContext can accept an InjectionKey<T>ContextKey<T> and return T:

This will improve type safety and can be done in a backwards compatible way.

The implementation would be just to add a new signature to getContext, setContext and hasContext

export interface ContextKey<T = unknown> { }
export function setContext<T>(key: ContextKey<T>, context: T): void
// getContext ...
// hasContext ...
// check for full implementation here:
// https://github.com/KamenKolev/svelte-typed-context/blob/master/index.ts
// (published npm package does not include `hasContext`, so install only from github)

Alternatives considered

Importance

nice to have

Search terms

typed context inject provide

[brunnerh]

Maybe just call it ContextKey, though?

[olehmisar]

@dummdidumm i just checked that adding a new function signature to {set,get,has}Context while preserving backwards compatibility is impossible. It's because the key argument is of type unknown and the new signature will not be typesafe because of that. If this feature is planned for the future, I think it's a great candidate for a new major release because it will be a breaking change.

[oscarhermoso]

You can add below snippet to src/app.d.ts and override the existing types 🙂

type Context = {
	theme: Writable<string | null>; // for example
};

declare module 'svelte' {
	export function getContext<T>(key: T extends keyof Context ? T : never): Context[T];

	export function setContext<T>(
		key: T extends keyof Context ? T : never,
		context: Context[T],
	): void;
}

[NickClark]

To extend the ideas mentioned above, my preferred app.d.ts flavor is:

declare module "svelte" {
  export interface ContextKey<T = unknown> {} // eslint-disable-line @typescript-eslint/no-unused-vars

  export function getContext<T>(key: ContextKey<T>): T;
  export function setContext<T>(key: ContextKey<T>, value: T): void;
  export function hasContext<T>(key: ContextKey<T>): boolean;
}

Then you can define your key as simply as:

export const TabContext: ContextKey<Tab[]> = {};

[NickClark]

The only real issue with the solution above, is that setContext ends up being an overload, so when trying to set the context value it falls back to the generic definition and won't autocomplete.

setContext(MyContextKey, { /* Typescript won't autocomplete this */ });

Anyone know of a way to override instead of extend?

[Carlos-err406]

i also tried the approaches above but cant get autocompletion on the value of set context, only on the key
here is my own flavor, importing Context from $lib/types

declare module 'svelte' {
	export function getContext<T extends keyof Context, K extends Context[T]>(key: T): K;
	export function setContext<T extends keyof Context, K extends Context[T]>(
		key: T,
		context: K
	): void;
}