Typed Provide and Inject in Vue

I didn’t know that you can type provide() and inject() elegantly until I watched Thorsten Lünborg’s talk on Vue Amsterdam.

The basic idea here is the Vue offers a type utility InjectionKey will you can type a Symbol to hold the type of your injection values. And when you use provide() and inject() with that symbol, it can infer the type of provider and return value automatically.

For example:

// context.ts import type { InjectionKey } from 'vue'  export interface UserInfo {  id: number  name: string }  export const InjectKeyUser: InjectionKey<UserInfo> = Symbol()

// parent.vue import { provide } from 'vue' import { InjectKeyUser } from './context'  export default {  setup() {  provide(InjectKeyUser, {  id: '117', // type error: should be number  name: 'Anthony',  })  }, }

// child.vue import { inject } from 'vue' import { InjectKeyUser } from './context'  export default {  setup() {  const user = inject(InjectKeyUser) // UserInfo | undefined   if (user)  console.log(user.name) // Anthony  }, }

See the docs for more details.