别再用 Parameters 乱推断了!vue-i18n 封装 t 函数的正确姿势

✨ 背景介绍

在最近写 Vue 3 项目的时候,我用了 vue-i18n 来做国际化。

在组件里用 useI18n().t()i18n.global.t() 都挺顺手的,直到有一天,我在一个普通的 .ts 工具函数中也想调用 t('xxx') 来取文案,结果就踩了坑。

于是我想着封装一下 t() 方法,抽出来统一用。

作为一名不愿意写重复代码的 TypeScript 信徒,我第一时间写下了这样的代码:

初步尝试:用 Parameters 封装

最初的写法:

ts 复制代码
import { createI18n } from 'vue-i18n'

const messages = {
  en: { hello: 'Hello' },
  zh: { hello: '你好' },
}

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  messages,
})

type I18nParams = Parameters<typeof i18n.global.t>;
const t = (...args: I18nParams): string => i18n.global.t(...args);

// 期望输出:你好
t('hello')

结果:t 报错!

"应有 3 个参数,但获得 1 个"

问题分析

🧠 为什么报错 "应有 3 个参数,但获得 1 个"

vue-i18n.t 方法有多个重载形式,可能是:

ts 复制代码
t(key: string): string
t(key: string, locale: string): string
t(key: string, values: Record<string, unknown>): string
t(key: string, values: unknown[], locale: string): string
// 等等...

所以 Parameters<typeof i18n.global.t> 推断出来的是个联合类型:

ts 复制代码
type I18nParams = [string] | [string, string] | [string, Record<string, unknown>] | ...

但是我这样写:

ts 复制代码
const t = (...args: I18nParams): string => i18n.global.t(...args);

会报错,因为 ...args 要求是一个具体的元组类型 ,但 I18nParams 是联合类型,TS 不知道你是哪一个,不能展开。

一通操作猛如虎:我选择了 bind

最终解决方案:

ts 复制代码
export const t = i18n.global.t.bind(i18n.global);
// 绑定 this,保留函数签名,类型不丢失

优点:

  • ✅ 类型安全(保留原函数的签名)
  • ✅ 没有 this 绑定问题
  • ✅ 不用手动写 overload
  • ✅ 简洁

推荐使用方式

ts 复制代码
import { t } from '@/utils/i18n';

t('common.ok');
t('user.greet', { name: '斌哥' });

总结 & 建议

  • 遇到重载的 API,谨慎使用 Parameters<>,尤其是推断出来的是联合类型
  • bind 是处理带 this 上下文 API 的最佳方式
  • 在 Vue 组件之外使用 i18n,建议封装一下 t,统一管理

插播一下:Parameters 本身没错,只是用错地方了

虽然这次我在封装 i18n.global.t 的时候,使用 Parameters<> 遇到了联合类型导致的类型报错,但其实 Parameters 在绝大多数场景下,依然是非常有用的工具类型。

举几个它非常好用的例子:

单一签名函数的参数复用

ts 复制代码
function greet(name: string, age: number): void {}

type GreetParams = Parameters<typeof greet>;
// 推断为 [name: string, age: number]

const callGreet = (...args: GreetParams) => greet(...args);

在这种没有重载的函数中,Parameters 非常稳健,能复用参数类型,减少重复定义。

简单封装函数时的"偷懒利器"

ts 复制代码
function log(message: string): void {}

type LogArgs = Parameters<typeof log>; // [message: string]

const logWithTimestamp = (...args: LogArgs) => {
  console.log(new Date(), ...args);
}

🚀 如果你在使用 vue-i18n + TypeScript 时也遇到类似的问题,希望这篇文章能帮你少踩一个坑。

如果你有更好的封装方式或不同看法,欢迎评论区一起探讨!

相关推荐
张志鹏PHP全栈9 小时前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript
郑板桥3012 小时前
ts学习1
学习·typescript
前端拿破轮14 小时前
女朋友要和我分手?!!居然是因为交不出赎金信,不会用哈希表😭😭😭
算法·leetcode·typescript
知识分享小能手1 天前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈1 天前
TypeScript 第三天,TypeScript中的类型(二)
typescript
成遇2 天前
Eslint基础使用
javascript·typescript·es6
张志鹏PHP全栈2 天前
TypeScript 第二天,TypeScript中的类型(一)
typescript
極光未晚2 天前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
安替-AnTi2 天前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林