i18n

thl-ui は @thl-ui/core に依存関係のない小さな i18n エンジンを備えており、English (en)、Tiếng Việt (vi)、日本語 (ja)、简体中文 (zh) の組み込みメッセージを提供します。組み込みの文字列（ページネーション、テーブル、日付ピッカー、バリデーション、アップロード、レイアウト、メニュー、ページテンプレート…）はすべて翻訳済みです。

ライブ: ロケールを切り替える

翻訳する

Vue

<script setup lang="ts">
import { useI18n } from '@thl-ui/vue';
const { t, n, d, locale, setLocale } = useI18n();
</script>
<template>
  <p>{{ t('pagination.total', { count: 3 }) }}</p>
  <p>{{ n(1234.5, { style: 'currency', currency: 'USD' }) }} · {{ d(new Date()) }}</p>
  <button @click="setLocale('ja')">日本語</button>
  <!-- どこでも $t('common.save') を使えます -->
</template>

React

import { useT, useLocale } from '@thl-ui/react';
const t = useT();
const [locale, setLocale] = useLocale();
<p>{t('pagination.total', { count: 3 })}</p>
<p>{t.n(1234.5, { style: 'currency', currency: 'USD' })} · {t.d(new Date())}</p>
<button onClick={() => setLocale('ja')}>日本語</button>

Angular

import { ThlI18nService, ThlTranslatePipe } from '@thl-ui/angular';
readonly i18n = inject(ThlI18nService);
// テンプレート:
//   {{ 'pagination.total' | thlT: { count: 3 } }}
//   {{ i18n.n(1234.5, { style: 'currency', currency: 'USD' }) }}
//   <button (click)="i18n.setLocale('ja')">日本語</button>

補間と複数形

メッセージには {name} 形式のプレースホルダーを使います。複数形は Intl.PluralRules のカテゴリーをキーとするオブジェクトです（zero は任意で、count === 0 のときに使われます）。count はロケールの数値形式でフォーマットされます。

pagination: {
  showing: 'Showing {from} to {to} of {total} entries',
  total: { one: '{count} item', other: '{count} items' },
}

t('pagination.total', { count: 1 })     // "1 item"
t('pagination.total', { count: 1200 })  // "1,200 items"  (vi: "1.200 mục")

メッセージの追加 / 上書き

設定で messages を渡すと、組み込みのメッセージとディープマージされます。

createThl({
  locale: 'ja',
  messages: {
    ja: { common: { save: '保存する' }, app: { welcome: 'こんにちは、{name}さん！' } },
    en: { app: { welcome: 'Welcome, {name}!' } },
  },
});

実行時: thl.i18n.mergeMessages('ja', { app: { bye: 'さようなら' } }) — コンポーネントは自動的に再レンダリングされます。

新しいロケールを追加する（遅延読み込み）

createThl({
  locales: ['en', 'ja', 'vi', 'zh', 'ko'],
  loadLocale: (l) => import(`./locales/${l}.ts`),   // Messages または { default: Messages } を返す
});
thl.setLocale('ko'); // 読み込み、マージしてから切り替え

テンプレートとして @thl-ui/locales/src/en.ts をコピーしてください。ThlMessages 型を使うと翻訳漏れをチェックできます。

import type { ThlMessages } from '@thl-ui/locales';
const ko: ThlMessages = { /* 不足しているキーを TypeScript が報告します */ };

右から左に書くロケール（ar、he、fa、ur）では <html> に dir="rtl" が設定されます。スタイルは論理プロパティを使うため、レイアウトは自動的に反転します。

数値と日付のフォーマット

n() と d() は、対応付けられた Intl ロケール（vi → vi-VN、ja → ja-JP、zh → zh-CN、en → en-US）で Intl.NumberFormat / Intl.DateTimeFormat をラップします。日付ピッカー、カレンダー、テーブル、チャートも同じフォーマッターを使うため、ロケールを切り替えると月名、週の開始日、区切り文字がすべての場所で変わります。

メッセージの名前空間

名前空間	使用箇所
common.*	ok、cancel、save、search、loading、empty…
pagination.*, table.*	Pagination、DataTable
select.*, datepicker.*, upload.*	フォームコントロール
validation.*	rules.* のエラーメッセージ
modal.*, toast.*, steps.*, session.*	フィードバック系コンポーネント
layout.*, menu.*	AppLayout、Topbar、SettingsPanel、サイドメニュー
pages.*	ページテンプレート（login、inbox、invoice、pricing、errors…）