Vue version

3.3.0-beta.3

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-eyefe5?file=src%2FApp.vue&terminal=dev

Steps to reproduce

The code, which undergoes type checking (via vue-tsc) in Vue 3.3.0-beta.3, will produce an error, whereas it will pass in Vue 3.2.47.

<script lang="ts">
const InjectKeySymbol: InjectionKey<{
  value: WritableComputedRef<number>;
}> = Symbol();
</script>

<script setup lang="ts">
import { provide, ref } from 'vue';

import type { InjectionKey, WritableComputedRef } from 'vue';

const count = ref(0);

provide(InjectKeySymbol, {
  value: count,
});
</script>

<template>
  <div>{{ count }}</div>
</template>

1. Open reproduction.
2. Open terminal and executed npm run typecheck

What is expected?

I hope this code can pass type checking in both Vue 3.3 and Vue 3.2.

What is actually happening?

src/App.vue:15:3 - error TS2741: Property 'effect' is missing in type 'Ref<number>' but required in type 'WritableComputedRef<number>'.

15   value: count,
     ~~~~~

  node_modules/@vue/reactivity/dist/reactivity.d.ts:281:14
    281     readonly effect: ReactiveEffect<T>;
                     ~~~~~~
    'effect' is declared here.
  src/App.vue:3:3
    3   value: WritableComputedRef<number>;
        ~~~~~
    The expected type comes from property 'value' which is declared here on type '{ value: WritableComputedRef<number>; }'


Found 1 error in src/App.vue:15

System Info

No response

Any additional comments?

I'm not sure if this was intended, if so please close this issue.

This seems to be an inconsistency issue that arose to address #8201, which I didn't notice. Perhaps this issue should be closed.

This should be considered intended behavior - the previous provide() types were not strict enough and allowing incompatible types to be provided. After the change it is now correctly catching type errors that should be fixed.

In your case, you are indicating that you are providing a WritableComputedRef but actually providing a Ref. The two types are indeed in compatible.