Comments (4)
@kkuegler thanks for reporting back. perhaps i will raise an issue with in the nuxt repo linking through to this.
for now the workaround is doing just fine.
slight tangent: is there some reason the t()
function returned from useTranslation
is type SimpleTFunction
instead of TFunction
? i've patched this in my app to provide better types, but wondering if i'm going to run into issues with that
from i18next-vue.
Closing this for now, as it seems we did look at all we could from the i18next-vue
side.
from i18next-vue.
This seems to be related to i18next-vue
providing the global $t
and $i18next
properties in Vue templates. We do this by augmenting Vue's ComponentCustomProperties
like so:
declare module 'vue' {
interface ComponentCustomProperties {
$t: TFunction;
$i18next: i18n;
}
}
Nuxt uses the same type to expose the utility functions.
When you remove that definition from i18next-vue's index.d.ts
(or just rename ComponentCustomProperties
to something else), your test case will work.
The test case still fails, if you replace the complete content of i18next-vue's index.d.ts
with a very simple
declare module 'vue' {
interface ComponentCustomProperties {
$t: Function;
}
}
export function useTranslation(): any;
One could assume that something is wrong with the declaration, but it follows Vue's docs and it also works if imported in a .ts file, as you can see in the forked version at https://stackblitz.com/edit/github-zn8swb-jecevj?file=utils/test.ts
Hovering over test1
and test2
in utils/test.ts
you can see, that both the capitalize
and the $t
definitions have been nicely merged and can be used.
However, if you add one of the 'i18next-vue' imports in app.vue again, the types break the Vue template.
Re-exporting useTranslation
from test.ts works and it is automatically available in the Vue template. So this seems like a nice workaround for this problem. This way no 'i18next-vue' import is required in the template.
Unfortunately I have no idea, what type magic happens in Nuxt Vue templates, so I think we would need Nuxt developers to understand what is going on with the imports in the Vue file. As there is an easy workaround, I think we can also live with the current situation.
from i18next-vue.
The returned t()
from useTranslation
internally is a TFunction when you use it in a Composition API component. So it is totally fine to patch that to actually have that type.
I initially exposed this as SimpleTFunction
through useTranslation
, because it was quite unclear what options useTranslation
should have in the future and how that would affect the returned t()
. So I went with this simpler type.
With the namespace and TS-suggestion support of #4 I'll change the type to actually be TFunction
.
As the i18next types - especially TFunction - are still in quite a flux, I have no clear time-frame when I'll fix #4 and publish this. This will probably be a new major version, as this change might break the types of existing users.
from i18next-vue.
Related Issues (16)
- Update GitHub workflows to match the new organization HOT 5
- support esm export
- Please update for i18next > v22.5.0 HOT 2
- Changes for `i18next-vue` v3 HOT 1
- test HOT 1
- [Typescript Error] useTranslation - Type instantiation is excessively deep and possibly infinite HOT 2
- Vue 2 compatible TranslationComponent not working as expected HOT 2
- Unable to install via npm? HOT 2
- dont work lazy loading file HOT 2
- how to access this.$i18next in composition api setup HOT 2
- Support TypeScript HOT 7
- The `i18next` object returned from the `useTranslation()` is not reactive. HOT 3
- Limit the scope of a SFC component to some namespace and key prefix. HOT 7
- Implement <i18next> component. HOT 17
- support v-t directive HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from i18next-vue.