{"id":23423043,"url":"https://github.com/legend80s/i18n-enhancer","last_synced_at":"2026-05-18T04:31:44.298Z","repository":{"id":268834427,"uuid":"905592595","full_name":"legend80s/i18n-enhancer","owner":"legend80s","description":"Make internationalization 🌍 as type safe and DX joyful 🤗 as it's meant to be!","archived":false,"fork":false,"pushed_at":"2024-12-31T01:38:21.000Z","size":83,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T10:40:45.728Z","etag":null,"topics":["i18n","i18next","javascript","react-i18next","react-intl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/legend80s.png","metadata":{"files":{"readme":"README-zh-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-19T06:25:27.000Z","updated_at":"2024-12-31T01:38:24.000Z","dependencies_parsed_at":"2024-12-30T15:18:28.548Z","dependency_job_id":"d20c92d2-71cd-4161-abbd-cdfff1fe9975","html_url":"https://github.com/legend80s/i18n-enhancer","commit_stats":null,"previous_names":["legend80s/i18dash","legend80s/i18n-enhancer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/legend80s/i18n-enhancer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/legend80s%2Fi18n-enhancer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/legend80s%2Fi18n-enhancer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/legend80s%2Fi18n-enhancer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/legend80s%2Fi18n-enhancer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/legend80s","download_url":"https://codeload.github.com/legend80s/i18n-enhancer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/legend80s%2Fi18n-enhancer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278708035,"owners_count":26031932,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18n","i18next","javascript","react-i18next","react-intl"],"created_at":"2024-12-23T03:13:36.144Z","updated_at":"2025-10-07T01:47:59.850Z","avatar_url":"https://github.com/legend80s.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🌍 i18n-enhancer\u003c/h1\u003e\n\n[英文](https://github.com/legend80s/i18n-enhancer/blob/master/README.md) | 中文\n\n\u003e 🛡️ 翻译即类型，让国际化开发更安全、更高效、代码更少！\n\u003e\n\u003e Make internationalization as **type safe 🛡️** and **DX joyful 🥳** as it's meant to be!\n\n## 特性 🌟\n\n本工具是 `react-i18next` / `i18next` 的类型增强器，给 `useTranslate` 提供了 **精确的类型**，使得 **key** 和 **插值变量名** 能有智能提示，这些类型均来自你提供的翻译文本，你无需提供额外的类型。这就是“**翻译即类型**”。\n\n- **翻译即类型**：无需额外类型声明，只需提供翻译文本，即可获得精确的类型。\n- **不会增加运行时成本**：没有任何核心运行时修改。\n- **不会增加额外包大小**：仅加了类型，因此不会额外增加包大小。\n\n## 安装 📦\n\n```bash\nnpm install react-i18next i18next --save\n\nnpm install i18n-enhancer --save\n```\n\n## 使用 📝\n\n### `react-i18next` 用户\n\nin Component:\n\n```diff typescript\nimport { useTranslation } from 'react-i18next';\n+ import { enhance } from 'i18n-enhancer/react-i18next';\n+ type ITranslationsEn = typeof import('./en').default;\n\n+ const { useT } = enhance\u003cITranslationsEn\u003e(useTranslation)\n\nconst Hello = () =\u003e {\n- const { t } = useTranslation(...);\n+ const { t } = useT(...);\n\n  return \u003cp\u003e{t('hi')}\u003c/p\u003e;\n}\n```\n\nout of Component:\n\n```diff typescript\nimport i18n from '@/src/locales/i18n';\n+ import { enhanceI18n } from 'i18n-enhancer/react-i18next';\n+ type ITranslationsEn = typeof import('./en').default;\n\n+ const { t } = enhanceI18n\u003cITranslationsEn\u003e(i18n)\n\nfunction sayHello = () =\u003e {\n- const { t } = i18n.t;\n\n  return \u003cp\u003e{t('hi')}\u003c/p\u003e;\n}\n```\n\n## Example\n\n### 1. 初始化 `react-i18next`\n\n[可选] 增加 `parseMissingKeyHandler` 减少冗余翻译：\n\n```diff typescript\n// src/locales/i18n.ts\n\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n+ import { getLast } from 'i18n-enhancer/utils';\n\ni18n.use(initReactI18next).init({\n  ...\n\n+  // 当翻译键不存在时，返回键最后一部分作为默认值，意味着如果你用中文做键那么你无需再添加中文翻译\n+  parseMissingKeyHandler: (key, defaultValue) =\u003e {\n+    return defaultValue ?? getLast(key);\n+  },\n});\n\nexport default i18n;\n```\n\n```typescript\n// zh\n{\n  // 无需提供中文翻译，你可以尝试注释下面一行，因为设置了 `parseMissingKeyHandler` 会用点最后的部分当做兜底翻译。是不是很棒！\n  'shopping.去支付': '去支付',\n\n  'shopping.orderSummaryText': '请确认您的订单信息',\n  'shopping.总共': '总共 {{ total }} 元',\n} as const\n```\n\n### 2. 创建 `react-i18next` **enhancer**\n\n```typescript\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { enhance } from 'i18n-enhancer/react-i18next';\n\n// 导入你不常开发的的语言翻译包。比如你的应用是面向中文用户，则导入英语即可。\n// 好处：类型推导会帮助你检测出没有英文翻译的 Key，其次如果你采用中文当做key，则无需提供中文翻译，\n// 因为我们已经设置好了 `parseMissingKeyHandler` 当 key 不存在将用其最后一部分当做翻译兜底。\ntype ITranslationsEn = typeof import('./en').default;\n\nconst { useT } = enhance\u003cITranslationsEn\u003e(useTranslation);\n```\n\n### 3. 使用 `useT` 替代 `useTranslation`\n\n\u003e `useT` 是 `useTranslation` 的类型增强版，它使用你的**翻译键**作为入参类型，**翻译值**作为返回类型。\n\n```typescript\nconst Shopping: React.FC = () =\u003e {\n  const { t } = useT();\n\n  return (\u003cmain\u003e\n    \u003cdiv\u003e{t('shopping.去支付')}\u003c/div\u003e\n    \u003cdiv\u003e{t('shopping.orderSummaryText')}\u003c/div\u003e\n    \u003cdiv\u003e{t('shopping.总共', { total: 100 })}\u003c/div\u003e\n  \u003c/main\u003e);\n};\n```\n\n**🧙‍♂️ 魔法开启**，当我们使用 `i18n-enhancer` 的 `useT`，假如我们的翻译如下：\n\n```typescript\n// en\n{\n  'shopping.去支付': 'Checkout',\n  'shopping.orderSummaryText': 'Please review your order details below.',\n  'shopping.总共': 'Total {{ total }} RMB',\n} as const\n```\n\n当你输入 `t('shopping.` 你会看到所有翻译的 key 都会提示出来。\n![image](https://github.com/user-attachments/assets/15fac1df-7e83-40e0-abc5-f20050c799ff)\n\n并且如果你的光标悬浮到 `t` 函数上，你会看到如下提示：\n\n```typescript\nt('shopping.去支付'): 'Checkout'; \nt('shopping.orderSummaryText'): 'Please review your order details below.';\n```\n\n**是的，你会看到居然将翻译文本都反显出来了** 而不仅仅是普普通通的 `string`！（当然前提是翻译必须增加 `as const`）。\n\n插值变量能否也提示？再来点小小的震撼，当输入以下代码，你会发现 `total` 这个变量名也会自动提示：\n\n```typescript\nt('shopping.总共', { total: number }): 'Total {{ total }} RMB';\n```\n\n**It is truly i18n type safe 🛡️.**\n\n最后当然 `\u003cShopping /\u003e` 会按照预期渲染：\n\nfor English:\n\n```jsx\n\u003cmain\u003e\n  \u003cdiv\u003eCheckout\u003c/div\u003e\n  \u003cdiv\u003ePlease review your order details below.\u003c/div\u003e\n  \u003cdiv\u003eTotal 100 RMB\u003c/div\u003e\n\u003c/main\u003e\n```\n\n在中文环境：\n\n```jsx\n\u003cmain\u003e\n  \u003cdiv\u003e去支付\u003c/div\u003e\n  \u003cdiv\u003e请确认您的订单信息\u003c/div\u003e\n  \u003cdiv\u003e总共 100 元\u003c/div\u003e\n\u003c/main\u003e\n```\n\n## 更多 API\n\n`enhance` 返回的 `i18n` 对原始 `i18n` 做了功能增强：\n\n### `enhance().resolvedLanguage`\n\n获取当前语言。\n\n### `enhance().isEnglish: boolean`\n\n判断当前语言是否是英文。\n\n其他 API 仍然来自原始的 `i18n`，比如 `i18n.changeLanguage` 等仍然可以使用。\n\n## FAQ\n\n### 如何在非 React 组件中使用\n\n比如 Node.js 中或普通函数中：\n\n```typescript\nimport initializedI18n from '@src/locales/i18n';\nimport { enhanceI18n } from 'i18n-enhancer/react-i18next';\n\ntype ITranslationsEn = typeof import('./en').default;\n\nconst i18n = enhanceI18n\u003cITranslationsEn\u003e(initializedI18n);\n\n// 切换语言\ni18n.changeLanguage('en');\n\n// 判断当前语言是否是英文\ni18n.isEnglish; // true\n\n// 翻译\ni18n.t('shopping.checkout'); // Checkout\n```\n\n## 限制\n\n### 1. 不支持嵌套翻译\n\n比如：\n\n```typescript\n{\n  shopping: {\n    checkout: 'Checkout',\n  }\n}\n```\n\n也不打算支持，因为我们认为平铺的 `key` 更容易查找，因为定义和使用一样，可读性也更好。\n\n### 2. `t` 的第二个参数无法通过翻译内是否有插值来决定是否必选，一律可选\n\n\u003e TS 本身不支持\n\n比如：\n\n```typescript\n{\n  'shopping.checkout': 'Checkout {{total}}',\n}\n```\n\n```typescript\n// 不会提示类型错误\nt('shopping.checkout')\n\n// 只有传入不存在的参数，或参数不够才会提示类型错误\nt('shopping.checkout', { notExist: 100 })\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flegend80s%2Fi18n-enhancer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flegend80s%2Fi18n-enhancer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flegend80s%2Fi18n-enhancer/lists"}