Svelte Typed Context
The library provides an interface called InjectionKey
which when provided to getContext
or setContext
allows for stricter types.
It also re-exports getContext
and setContext
with types made to work with InjectionKey.
Usage
For the best experience, enable strict mode in your tsconfig.json
// in key
import type { InjectionKey } from "svelte-typed-context"
export const key : InjectionKey<{ foo: number }> = Symbol('Desired type')
// in provider component
import { setContext } from "svelte-typed-context"
import { key } from "./key"
setContext(key, "bob") // bad -> would error out
setContext(key, { foo: 123 }) // good -> would work
// in consumer component
import { getContext } from "svelte-typed-context"
import { key } from "./key"
const contextValue = getContext(key) // automatically inferred as { foo: number }
Credits
Inspired by Vue.