Typescript - Locale Sync

Installing

Once you have already added your config file and your translation fallback file you can generate your .ts files by running:

npx locale-sync gen

pnpx locale-sync gen

bunx locale-sync gen

If you want to upload it to servers already you can just run after:

npx locale-sync upload

pnpx locale-sync upload

bunx locale-sync upload

This will send your translations to the repository specified in your config file, upserting languages and strings from your file. Somewhere in your app (we recommend inside main function) you’ll need to setup the sdk, you can do so by adding:

const translator = new Translator("en", "your-api-token",  "your-repository-id");
translator.fetch();

You just need to call .fetch() if you want to use the over-the-air feature, otherwise you can just use raw translator object

Getting translations

import {translator} from "@/di";

export const MyComponent = () => {
  const translator = inject<Translator>("translator");

  return (
    <h2>
      {{translator.translate('myString')}}
    </h2>
  );
}

<script setup lang="ts">
  import {translator} from "@/di";

  const translator = inject<Translator>("translator");
</script>

<template>
  <h2>
    {{translator.translate('myString')}}
  </h2>
</template>

When you get strings which takes arguments you add it as a function arg, and the same is applied to plural strings:

const message = translator.translate('minValidation',8, {name: 'Password'});
// Handle validation logic

{
  "en": {
        "minValidation" : {
                "plural" : "{name} deve ter no mínimo {count} caracteres",
                "value" : "{name} deve ter no mínimo 1 caracter"
            }
        }
}