npm install @hi18n/core @hi18n/react-context @hi18n/react
npm install -D @hi18n/cli
# Or:

yarn add @hi18n/core @hi18n/react-context @hi18n/react
yarn add -D @hi18n/cli

import { Book, Catalog, Message, msg } from "@hi18n/core";

type Vocabulary = {
  "example/greeting": Message<{ name: string }>;
};
const catalogEn = new Catalog<Vocabulary>({
  "example/greeting": msg("Hello, {name}!"),
});
export const book = new Book<Vocabulary>({ en: catalogEn });

import React from "react";
import { useI18n } from "@hi18n/react";
import { book } from "../locale";
export const Greeting: React.FC = () => {
  // Locale can be configured via

npm install @hi18n/core @hi18n/react-context @hi18n/react
npm install -D @hi18n/cli

# Or:
yarn add @hi18n/core @hi18n/react-context @hi18n/react
yarn add -D @hi18n/cli

그런 다음 번역 데이터용 파일을 만듭니다. 기본 설정에 따라 단일 파일 또는 다중 파일의 두 가지 방식으로 구성할 수 있습니다. 이 가이드에서는 후자를 사용합니다.

다중 파일 구성에는 N+1개의 파일이 있습니다. 여기서 N은 언어 수입니다.

// src/locale/index.ts
// (other names are fine)
// This file defines the list of translatable strings.

import { Book, Message } from "@hi18n/core";
import catalogEn from "./en";
import catalogJa from "./ja";

export type Vocabulary = {
  // "<Translation ID>": Message<{ <Parameters> }>; (or simply Message; if you don't need parameters)
  "example/greeting": Message<{ name: string }>;
};

// This is a bundle of translations for all languages (English and Japanese in this case).
export const book = new Book<Vocabulary>({
  en: catalogEn,
  ja: catalogJa,
});

// src/locale/en.ts
// (other names are fine)
// This file contains translated messages in a specific language (i.e. English).

import { Catalog, msg } from "@hi18n/core";
import type { Vocabulary } from ".";

export default new Catalog<Vocabulary>({
  // "<Translation ID>": msg(<translated message>),
  "example/greeting": msg("Hello, {name}!"),
});

// src/locale/ja.ts (in the same manner as en.ts)

import { Catalog, msg } from "@hi18n/core";
import type { Vocabulary } from ".";

export default new Catalog<Vocabulary>({
  "example/greeting": msg("こんにちは、{name}さん!"),
});

그런 다음 번역 및 번역 ID를 동기화하기 위한 명령을 정의합니다.

// package.json
{
  "scripts": {
    "i18n:sync": "hi18n sync 'src/**/*.ts' 'src/**/*.tsx'"
  }
}

그런 다음 hi18n을 사용할 수 있습니다.

ESLint를 사용하는 경우 our ESLint plugin을 권장합니다. 패키지를 설치하고 plugin:@hi18n/recommended 라는 사전 설정을 확장하십시오.

번역된 메시지 사용

애플리케이션 코드에서 번역된 메시지를 사용하는 방법에는 여러 가지가 있습니다.

사용 I18n

React를 사용하는 경우 가장 표준적인 방법입니다. useI18n 를 사용하려면 먼저 로케일을 구성해야 합니다(일반적으로 트리의 루트).

// An example with explicit ReactDOM call.
// You may need to place it in a different place (like _app.ts).
import { LocaleProvider } from "@hi18n/react";


const root = ReactDOMClient.createRoot(/* ... */);
root.render(
  <LocaleProvider locales="ja">
    {/* ... */}
  </LocaleProvider>
);

그런 다음 useI18n을 사용하여 트리의 모든 위치에서 변환을 시작합니다.

import { useI18n } from "@hi18n/react";
// You need to explicitly import the translation data (which we call a book).
import { book } from "../../locale";

const Greet: React.FC = () => {
  // It returns a function for translation using the current locale (from the context) and the book you supplied.
  const { t } = useI18n(book);
  return <>{t("example/greeting", { name: "太郎" })}</>;
};

<번역>으로

<Translate> 구성 요소는 마크업 또는 React 요소와 인터리브된 메시지를 번역하는 데 적합합니다.

import { Translate } from "@hi18n/react";
// You need to explicitly import the translation data (which we call a book).
import { book } from "../../locale";

const Greet: React.FC = () => {
  return <Translate book={book} id="example/greeting" name="太郎" />;
};

<Translate> 의 경우 React 요소를 매개변수로 번역에 전달할 수 있습니다.

const UnreadMessages: React.FC = () => {
  const unreadCount = 2;
  if (unreadCount === 0) return null;

  // en: "You have <link>{count,plural,one{# unread message}other{# unread messages}}</link>"
  // ja: "<link>{count,number}通の未読メッセージ</link>があります"
  return <Translate book={book} id="example/unread" count={unreadCount}>
    <a key="link" href="https://example.com/inbox" />
  </Translate>;
};

번역 및 번역 ID 동기화

hi18n sync 명령을 사용하여 애플리케이션과 번역 데이터 간에 번역 ID를 동기화합니다.

hi18n sync <globs...> [--exclude <glob>] [--check | -c]

package.json을 사용하여 작업을 정의합니다.

// package.json
{
  "scripts": {
    "i18n:sync": "hi18n sync 'src/**/*.ts' 'src/**/*.tsx'"
  }
}

번역을 업데이트하는 데 사용하세요.

npm run i18n:sync

# Or:

yarn i18n:sync

저장되지 않은 번역 변경 사항에 주의하십시오. 번역이 포함된 TypeScript/JavaScript 파일을 다시 작성할 수 있습니다.

이 명령은 다음을 수행합니다.

사용하지 않는 번역을 주석 처리하고

애플리케이션에 필요한 번역에 대한 상용구를 생성하지만 아직 정의되지 않았습니다.

아직 사용 중인 번역이 실수로 주석 처리되는 경우가 있습니다. 이것은 응용 프로그램의 실수로 인해 발생했을 수 있습니다.

도구가 번역 사용을 감지할 수 없는 방식으로 hi18n을 사용했을 수 있습니다.

또는 디버깅을 위해 응용 프로그램의 일부를 주석 처리하고 동기화 명령을 실행하기 전에 주석 처리를 해제하는 것을 잊었을 수 있습니다.

어쨌든 응용 프로그램의 문제를 수정하고 동기화를 다시 실행하십시오. 그런 다음 명령은 주석 처리를 취소합니다.

새로운 번역 가능한 메시지 추가

새 메시지를 추가하려면 다음 단계를 따르세요.

먼저 t.todo 또는 <Translate.Todo> 대신 t 또는 <Translate>를 사용하여 메시지를 추가합니다.

t.todo("example/new");
<Translate.Todo book={book} id="example/new" />;

그런 다음 hi18n sync 명령을 사용하여 상용구를 생성합니다. 실제 번역을 입력하고 .todo 또는 .Todo를 제거합니다.

모든 것을 직접 편집해도 동일한 결과를 얻을 수 있습니다.

hi18n으로 할 수 있는 다른 작업

이러한 내용은 이후 게시물에서 다룰 예정입니다.

복수형 및 숫자 형식. Intl API를 사용하려면 브라우저에서 API를 사용할 수 있어야 합니다.

t.dynamic , Translate.Dynamic 및 translationId 메시지를 동적으로 선택하는 API입니다.

ESLint 플러그인@hi18n/eslint-plugin은 hi18n의 올바른 사용을 보장합니다. 또한 Lingui에서 마이그레이션과 같은 도우미 규칙도 있습니다.

번역 데이터를 분할해야 하는 경우 여러 책을 만들면 됩니다. 번들 크기를 줄여야 하거나 라이브러리에서 hi18n을 사용해야 하는 경우에 유용합니다.

출판사 마크

이 기사는 원래 written in Japanese 저자가 영어로 번역했습니다.