TypeScript

使用 Lingo.dev CLI 进行 TypeScript 本地化文件的 AI 翻译

什么是 TypeScript 本地化?

TypeScript 本地化文件使用 TypeScript/JavaScript 对象语法来存储翻译字符串。它们通常用于现代 Web 应用程序中,以实现类型安全的国际化。

例如:

const messages = {
  navigation: {
    home: "Home",
    about: "About Us",
    contact: "Contact Us"
  },

  forms: {
    title: "Contact Form",
    nameLabel: "Your Name",
    submitButton: "Send Message"
  },
};

export default messages;

什么是 Lingo.dev CLI?

Lingo.dev CLI 是一个免费的开源 CLI,用于通过 AI 翻译应用程序和内容。它旨在取代传统的翻译管理软件,同时与现有的管道集成。

要了解更多信息,请参阅 概述

关于本指南

本指南解释了如何使用 Lingo.dev CLI 翻译 TypeScript 本地化文件。

您将学习如何:

  • 从头开始创建项目
  • 配置翻译管道
  • 使用 AI 生成翻译

前提条件

要使用 Lingo.dev CLI,请确保已安装 Node.js v18+:

❯ node -v
v22.17.0

第 1 步:设置项目

在项目目录中,创建一个 i18n.json 文件:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

此文件定义了翻译管道的行为,包括要翻译的语言以及本地化内容在文件系统中的位置。

要了解更多可用属性,请参阅 i18n.json

第 2 步:配置源语言环境

源语言环境 是您的内容所使用的原始语言和地区。要配置源语言环境,请在 i18n.json 文件中设置 locale.source 属性:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

源语言环境必须以 BCP 47 语言标签 的形式提供。

有关 Lingo.dev CLI 支持的语言环境代码的完整列表,请参阅 支持的语言环境代码

第 3 步:配置目标语言环境

目标语言环境 是指您希望将内容翻译成的语言和地区。要配置目标语言环境,请在 i18n.json 文件中设置 locale.targets 属性:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

第 4 步:创建源内容

如果尚未创建,请创建一个或多个包含待翻译内容的 TypeScript 本地化文件。这些文件的路径中必须包含源语言环境(例如,作为目录名称如 en/ 或作为文件名的一部分如 messages.en.ts)。

第 5 步:创建存储桶

  1. i18n.json 文件中,向 buckets 对象添加一个 "typescript" 对象:

    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "typescript": {}
      }
    }
    
  2. "typescript" 对象中,定义一个或多个 include 模式的数组:

    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "typescript": {
          "include": ["./[locale]/example.ts"]
        }
      }
    }
    

    这些模式定义了需要翻译的文件。

    模式本身:

    • 必须包含 [locale] 作为配置语言环境的占位符
    • 可以指向文件路径(例如,"[locale]/messages.ts"
    • 可以使用星号作为通配符占位符(例如,"[locale]/*.ts"

    不支持递归的 glob 模式(例如,**/*.ts)。

第 6 步:配置 LLM

Lingo.dev CLI 使用大型语言模型(LLM)通过 AI 翻译内容。要使用这些模型之一,您需要一个支持提供商的 API 密钥。

为了尽快开始使用,我们推荐使用 Lingo.dev Engine —— 我们自己的托管平台,每月提供 10,000 个免费令牌:

  1. 注册一个 Lingo.dev 账户

  2. 运行以下命令:

    npx lingo.dev@latest login
    

    这将打开您的默认浏览器并要求您进行身份验证。

  3. 按照提示操作。

第 7 步:生成翻译

在包含 i18n.json 文件的目录中,运行以下命令:

npx lingo.dev@latest run

此命令将执行以下操作:

  1. 读取 i18n.json 文件。
  2. 查找需要翻译的文件。
  3. 从文件中提取可翻译的内容。
  4. 使用配置的 LLM 翻译提取的内容。
  5. 将翻译后的内容写回文件系统。

首次生成翻译时,会创建一个 i18n.lock 文件。此文件记录已翻译的内容,防止后续运行时进行不必要的重复翻译。

示例

en/example.ts

const messages = {
  navigation: {
    home: "Home",
    about: "About Us",
    contact: "Contact Us",
    services: "Our Services"
  },

  forms: {
    title: "Contact Form",
    nameLabel: "Your Name",
    emailLabel: "Email Address",
    messageLabel: "Your Message",
    submitButton: "Send Message",
    successMessage: "Thank you for your message!",
    locked_key_1: "This value is locked and should not be changed",
    ignored_key_1: "This value is ignored and should not be processed"
  },
};

export default messages;

es/example.ts

const messages = {
  navigation: {
    home: "Inicio",
    about: "Sobre Nosotros",
    contact: "Contáctanos",
    services: "Nuestros Servicios"
  },

  forms: {
    title: "Formulario de Contacto",
    nameLabel: "Tu Nombre",
    emailLabel: "Dirección de Correo Electrónico",
    messageLabel: "Tu Mensaje",
    submitButton: "Enviar Mensaje",
    successMessage: "¡Gracias por tu mensaje!",
    locked_key_1: "This value is locked and should not be changed",
  },
};

export default messages;

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "typescript": {
      "include": ["./[locale]/example.ts"],
      "lockedKeys": ["locked_key_1"],
      "ignoredKeys": ["ignored_key_1"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  0cdc4f3ba34edc7f3ba4d996158306ad:
    navigation/home: 104a3db3b671c04e167eafbe21e57881
    navigation/about: 8f89131a66d4659be07cd5af2c7ea898
    navigation/contact: 2a75337dc9603915c4ec1d1905afb7b9
    navigation/services: 999f32026e64978cb3ec794a496b0bb8
    forms/title: ac85dea7c7f0bf1cd7d48cc1b4da3acc
    forms/nameLabel: 03c6ae7996d5841f743cd406b4eff72d
    forms/emailLabel: 0ee22bbbe989a0c61a18023407d12dc2
    forms/messageLabel: 1e460d0909502d0e94b9be562643af0d
    forms/submitButton: 487177489aafc9c0243c57ef3850a2d9
    forms/successMessage: a0a7aa980dffa31d4d194af718a917b3
    forms/locked_key_1: 73fc105de1aefc3f0a97d187a80cf0a4
    forms/ignored_key_1: d88a7aa6c5661ca901ee0f4cb51e3a0d