Skip to content
New issue

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

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

Already on GitHub? # to your account

types(computed): allow computed getter and setter types to be unrelated #11472

Merged
merged 4 commits into from
Aug 5, 2024

Conversation

Alfred-Skyblue
Copy link
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

@Alfred-Skyblue Alfred-Skyblue reopened this Aug 1, 2024
@Alfred-Skyblue Alfred-Skyblue changed the base branch from main to minor August 1, 2024 13:06
Copy link

github-actions bot commented Aug 1, 2024

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 97.3 kB (+7.2 kB) 37 kB (+2.41 kB) 33.3 kB (+2.13 kB)
vue.global.prod.js 155 kB (+8.16 kB) 56.7 kB (+2.7 kB) 50.5 kB (+2.43 kB)

Usages

Name Size Gzip Brotli
createApp 53.8 kB (+4.19 kB) 20.9 kB (+1.38 kB) 19 kB (+1.21 kB)
createSSRApp 57.8 kB (+4.57 kB) 22.5 kB (+1.52 kB) 20.4 kB (+1.34 kB)
defineCustomElement 57.2 kB (+5.26 kB) 22 kB (+1.73 kB) 20 kB (+1.52 kB)
overall 67.4 kB (+4.25 kB) 25.9 kB (+1.39 kB) 23.5 kB (+1.25 kB)

@Alfred-Skyblue Alfred-Skyblue changed the title feat(computed): allow computed getter and setter types to be unrelated types(computed): allow computed getter and setter types to be unrelated Aug 2, 2024
@yyx990803 yyx990803 merged commit a01675e into vuejs:minor Aug 5, 2024
7 checks passed
@Alfred-Skyblue Alfred-Skyblue deleted the computed-type branch August 5, 2024 05:18
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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