Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type 'Ref<any> | WritableComputedRef<any>' is not assignable to type 'WritableComputedRef<any>' in Vue 3.3.0-beta.3 #8228

Closed
Mini-ghost opened this issue May 4, 2023 · 2 comments

Comments

@Mini-ghost
Copy link
Contributor

Mini-ghost commented May 4, 2023

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.

@Mini-ghost Mini-ghost changed the title The types in Vue 3.3.0-beta.3 are inconsistent with those in Vue 3.2.47. Type 'Ref<any> | WritableComputedRef<any>' is not assignable to type 'WritableComputedRef<any>' in Vue 3.3.0-beta.3 May 4, 2023
@Mini-ghost
Copy link
Contributor Author

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

@yyx990803
Copy link
Member

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.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 10, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants