vue-i18n
vue-i18n copied to clipboard
Type inference with the `watch` callback argument for `locale`.
Reporting a bug?
When locale is specified as the first argument of watch, the type inference of the watch callback argument cannot be inferred correctly.

Expected behavior
When locale is specified as the first argument of watch, the type inference of the watch callback argument should be inferred correctly.
locale type is WritableComputedRef<Locales>
https://github.com/intlify/vue-i18n-next/blob/master/packages/vue-i18n-core/src/composer.ts#L1131
so, watch callback argument type should be inferred with Locales.
Reproduction
https://github.com/intlify/vite-vue-i18n-starter/blame/repro-watch/src/App.vue#L26-L31
System Info
System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 390.03 MB / 64.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.17.0 - ~/bin/.nvm/versions/node/v14.17.0/bin/node
Yarn: 1.22.10 - ~/bin/.nvm/versions/node/v14.17.0/bin/yarn
npm: 6.14.13 - ~/bin/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Chrome: 92.0.4515.131
Safari: 14.1.2
npmPackages:
vue: ^3.2.1 => 3.2.1
vue-i18n: ^9.2.0-beta.1 => 9.2.0-beta.1
Screenshot
No response
Additional context
Workaround:
watch((() => locale.value), newlocale => {
console.log(typeof newLocale) // output is 'string'
})

watch(locale, newLocale => {
const n = newLocale as unknown as string
})
Validations
- [X] Read the Contributing Guidelines
- [X] Read the Documentation
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
@kazupon
This might be a work around:
watch(() => locale.value, newLocale => {
console.log(typeof newLocale)
})
I just tested, in this case, the type of newLocale is string.
@PeterAlfredLee
Oh... I forgot it use the function at watch 😅
Thanks!
So, I'll update the new workaround with your suggestion. 😉