Transloco: [Discussion] Translation file typing

[mailok]

The drawback that I find this library is that the translations are based on a key-value translation object in which to identify the key that you want to translate you must specify a string. The fact of using a string causes us to lose all the type control of the variables that we want to translate.

What are the problems that arise from this?

1. We can not know if a key is lost, incomplete or has typo.

2. We do not have autocomplete, despite having nested objects that can be complex.

3. You can not change the name of a key automatically (refactoring) between all the languages, we must modify each file of languages one by one.

Is there any way to solve this?

[shaharkazaz]

@mailok
As far as I know, currently there is no alternative method (please correct me if I'm wrong).

This might be solved if we decide to take the approach suggested in #2 since we are removing the usage of keys and using the translation directly.

If you have any idea, please do share 👍

[mailok]

@shaharkazaz These problems, I extracted them from an article https://carloscaballero.io/angular-ngx-translate-typings/ but it was for the use of @ ngx-translate. Perhaps the solution presented in this article may give an idea of a possible solution.

[Coly010]

@mailok Transloco does support using typescript files as it stands currently.

As such, right now out of the box, if you wanted to ensure type safety, you could use either Directive or Pipe approach.

In your component, import your en.ts as a type, and set the following to a public property on your component.

import typedTranslation from '../assets/i18n/en';
...

TRANSLATIONS = Object.keys(typedTranslation)

You can then use this property within your template:

<span [transloco]="TRANSLATIONS.HOME.content"></span>

<span>{{ TRANSLATIONS.HOME.content | transloco }}</span>

[itayod]

Hi @mailok,

Thanks for the suggestion, the suggested solution from this blog will work in Transloco, but I would not recommend you to use it from few reasons:

• since you need to import the translation file, it won't be lazy loaded and will be added to your bundle
• you will need to inject a service in each component that uses translations.

Having said that, we are looking for a better typing solution, and will soon develop one soon :)

[mailok]

@itayod Great!!, thank you very much