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

fix(types): $t types #1883

Merged
merged 1 commit into from
Jul 5, 2024
Merged

Conversation

mitjans
Copy link
Contributor

@mitjans mitjans commented Jul 4, 2024

This PR addresses 2 problems with Typescript types:

  • $t does not have TypeScript auto-completions #1215: By removing the type Path from the key: Key | ResourceKeys | Path, we get type inference to work again and suggest valid translations when using globally injected $t. Since the type Key extends string already extends from string, it shouldn't cause any regression. For the type inference to work when using $t, you have to extend the module types:
     import en from '@src/assets/locales/en.json';
     
     type Messages = typeof en;
     
     declare module 'vue-i18n' {
       export interface DefineLocaleMessage extends Messages {}
     }
  • When fixing the first issue, I found that nested keys are treated as translations by themselves. For example:
     {
       "this": {
         "is": {
           "a": {
             "nested": {
               "key": "This is a nested key"
             }
           }
         }
       }
     }
    When having this en.json locale file, type inference will suggest a combination of all keys:
    image
    But this is not correct, only this.is.a.nested.key should be suggested. I've created two new types to solve this:
  1. JsonPaths: Will return leaf keys only, and not suggest in-between keys from a JSON or Javascript object. I've called it Json because this should be used when extracting translations from JSON files.

  2. TranslationsPaths: This will simply remove the first level of a JSON or JS object and return the JsonPaths from the second level onwards. This is used for translations coming directly from the composer, where the top-level key is the language.

I've tried not to modify existing types to avoid breaking something, and I just created these 2 new types. Here're two images of the new behavior both in $t and when using the composer:
image
image

Copy link
Member

@kazupon kazupon left a comment

Choose a reason for hiding this comment

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

Thank you for your contribution!
Wow! Great works!

Your PR will improve i18n DX!

Thanks!

@kazupon kazupon added the Type: Bug Bug or Bug fixes label Jul 5, 2024
@kazupon kazupon merged commit 2e46476 into intlify:master Jul 5, 2024
24 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Bug or Bug fixes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants