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

Computed properties cannot with different types in getter/setter in TypeScript #7271

Closed
otomad opened this issue Dec 4, 2022 · 7 comments · Fixed by #11472
Closed

Computed properties cannot with different types in getter/setter in TypeScript #7271

otomad opened this issue Dec 4, 2022 · 7 comments · Fixed by #11472
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. scope: types

Comments

@otomad
Copy link

otomad commented Dec 4, 2022

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNqVUk1LxEAM/StxLt2FbYseS7coIijoRQQvA9Jds7XS+WAmVaT2v5uZ6bpePbWZl7y8vGQSV9YWHyOKStR+73pL4JFGC0Oru60U5KVopO6VNY5gAoeHDeyNsiPhK8xwcEZBxgSZ1FLvjfYEL8p3sA2ptR7VDl2zOl8fwYQdGVaT1AAdUgWrNWybWFt8tMOIm4CwFkZiXEEig2/w5HrdxfxYL+lUxuTxy3JolnrmxmUJ9GXRHELzCp5dT+1uwOtFw+NJZ5jhL1N2wWMt5ZClthn0HrQhaL3vOx2YgMySkni4qC6Tm5GyJlR2aAk5AqjfzptpikbMc11yFF97zWqgiq3ZeIalgMv4yiGraRbvVlhQ69gzVgC3Tw/3dyHnZkCFmtZJe1wak57leRr6vxNAnjNDXf4qFxuRjiBXrS3evdF8Msn9BeBLqdI+whufRIileCOyvipLf9iHQ3v3hXFdyX+FGzX1Cgv0Kt858+nRMbEUgSKsTsw/487lnQ==

Steps to reproduce

Define a computed property, getter type is number, setter type is number | string.

The computed property type is WritableComputedRef<number>.

And cannot set a string to its value.

What is expected?

Can set both a string and a number to the value of computed property.

What is actually happening?

type 'string' is not assignable to type 'number'

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 1.66 GB / 11.80 GB
  Binaries:
    Node: 19.0.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.62)
    Internet Explorer: 11.0.22621.1

Any additional comments?

TypeScript is support different types for getter and setter now.

A suggested solution is to define the type of Writable Computed Ref as WritableComputedRef<number, number | string>.

@rudyxu1102

This comment was marked as off-topic.

@ferferga
Copy link
Contributor

ferferga commented May 8, 2023

@otomad You need to do computed<string | number>({...)
This is fully documented: https://vuejs.org/guide/typescript/composition-api.html#typing-computed

@jacekkarczmarczyk
Copy link
Contributor

You need to do computed<string | number>({...)

@ferferga If you do computed<string | number>({...) then computed's value will have type string | number and not number, so it's not a solution

@ferferga
Copy link
Contributor

ferferga commented May 8, 2023

@jacekkarczmarczyk What's the use case for this though? I think allowing this is error-prone.

Computed are derived state, and as such, the getter should have some relation with the setter.

With pure (non-reactive) variables, TypeScript doesn't allow to define a type for "getting" and another for "setting". Neither in classes. It's a bad design pattern. Why should this be in core?

Computed should not be treated like functions, but as variables (more precisely, getters)

I understand that the original poster's issue is that the original get value is just a number, so TypeScript just infers it as a number and needs additional info (in this case a type annotation) to know it can be a string too.

@jacekkarczmarczyk
Copy link
Contributor

I've only pointed out that your "solution" is not a solution for the problem. Whether the feature can be implemented or not or what are the use cases is a different thing

Anyway, most probably it can't be implemented because of ts limitations, here's a long discussion on this topic: microsoft/TypeScript#2521

@ferferga
Copy link
Contributor

ferferga commented May 8, 2023

I understand that the original poster's issue is that the original get value is just a number, so TypeScript just infers it as a number and needs additional info (in this case a type annotation) to know it can be a string too.

@jacekkarczmarczyk This is why I said it's a solution in my first message, since I believed it's a misconception (though probably I shouldn't have done that in the first place 😊).

@Alfred-Skyblue
Copy link
Member

The issue has been resolved by PR #11472

@github-actions github-actions bot locked and limited conversation to collaborators Aug 21, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. scope: types
Projects
None yet
6 participants