Skip to content

feat(computed): allow computed get/set to have different types#8543

Closed
Alfred-Skyblue wants to merge 3 commits into
vuejs:mainfrom
Alfred-Skyblue:feat-computed
Closed

feat(computed): allow computed get/set to have different types#8543
Alfred-Skyblue wants to merge 3 commits into
vuejs:mainfrom
Alfred-Skyblue:feat-computed

Conversation

@Alfred-Skyblue

@Alfred-Skyblue Alfred-Skyblue commented Jun 11, 2023

Copy link
Copy Markdown
Member

resolve #7271

In certain cases, we would like the computed property's getter and setter to have different types. This would provide added convenience in our usage, such as having the getter return a string while the setter accepts an object. In this PR, I have added a second generic parameter to the computed property to specify the type of the setter. With this enhancement, we can set different types for the getter and setter of computed using the following approach.

Examples:

const obj = ref({
  name: 'foo'
})

const newObj = computed<string, typeof obj.value>({
  get() {
    return JSON.stringify(obj.value)
  },
  set(val) {
    obj.value = val
  }
})
console.log(newObj.value) // string

newObj.value = { name: 'bar' } // object

sxzz
sxzz reviewed Jun 11, 2023
View reviewed changes

@sxzz sxzz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's great! It's exactly what I wanted to do before. However, we need to explore ways to ensure compatibility with TS versions higher than 4.4. Perhaps we can use typeVersions to differentiate between TS >= 5.1 and other versions.

@sxzz sxzz mentioned this pull request Jun 11, 2023
Closed
@Alfred-Skyblue

Alfred-Skyblue commented Jun 12, 2023

Copy link
Copy Markdown
Member Author

That's great! It's exactly what I wanted to do before. However, we need to explore ways to ensure compatibility with TS versions higher than 4.4. Perhaps we can use typeVersions to differentiate between TS >= 5.1 and other versions.

If you use typeVersions to handle it, will it cause users to need to modify the tsconfig.json file in the project?

@sxzz

sxzz commented Jun 12, 2023

Copy link
Copy Markdown
Member

No, it doesn't need to. The only thing that needs to be done is to add typesVersions in the package.json file of Vue.

https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions

@Alfred-Skyblue

Alfred-Skyblue commented Jun 12, 2023

Copy link
Copy Markdown
Member Author

That's great, we can use typesVersions to differentiate versions less than 5.1.

@Alfred-Skyblue Alfred-Skyblue changed the title Allow computed get/set to have different types feat(computed): allow computed get/set to have different types Jun 12, 2023
@haoqunjiang haoqunjiang added scope: types 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. labels Jun 17, 2024
@sxzz sxzz mentioned this pull request Aug 7, 2024
Merged
@Alfred-Skyblue Alfred-Skyblue deleted the feat-computed branch August 7, 2024 13:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sxzz sxzz sxzz left review comments

Assignees

No one assigned

Labels

🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. scope: types

Projects

Issue / PR Management
Status: Rejected

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

3 participants

@Alfred-Skyblue @sxzz @haoqunjiang