Subscribe on changes!

Cannot use a ref(boolean) into provide using InjectionKey

avatar
Feb 21st 2021

Version

3.0.5

Reproduction link

https://codesandbox.io/s/awesome-rgb-q2q1e

Steps to reproduce

  • Create a Vue3 app using the CLI with Typescript
  • Make an App.vue with the minimal code in example

What is expected?

provide call works and I'm able to inject a read-only boolean

What is actually happening?

Typescript errors


Error message: Argument of type '{ readonly value: boolean; readonly [RefSymbol]: true; }' is not assignable to parameter of type 'boolean'.

Was following example found here: https://v3.vuejs.org/api/composition-api.html#provide-inject

avatar
Feb 21st 2021

Well, you define the injection as boolean, but it's a readonly ref containing a boolean. so typescript rightfully complains.

const logInKey = Symbol("is the user logged in") as InjectionKey<Readonly<Ref<boolean>>>
//or 
const logInKey = Symbol("is the user logged in") as InjectionKey<typeof isLoggedIn>