如何在多语言项目中增加Key类型，提供代码补全功能
星期三, 12月 11, 2024 | 1分钟阅读 | 更新于 星期三, 12月 11, 2024
增加语言包和类型文件
//语言包字典和接口定义
interface LanguagePackage {
user: {
username: string;
password: string;
};
}
const ZH_Language: LanguagePackage = {
user: {
username: '用户名',
password: '密码'
}
};
//泛型类型定义
type NestedLangKey<T> = T extends object
? {
[K in keyof T]: T[K] extends object ? `${K & string}.${NestedLangKey<T[K]>}` : K & string;
}[keyof T]
: never;
//语言key类型定义
export type LanguageKey = NestedLangKey<LanguagePackage>;
使用模拟
引入语言的key类型定义
import { LanguageKey } from '.....'
//使用，这里模拟,其他的i8n包提供了类似的方法，引入即可
const $message = (key: LanguageKey) => {
//省略
};
$message('user.password');
Vue里如何使用
React项目一般已经集成或者很好集成类似的功能，但是Vue文件的模版中想要使用类型提示，需要在@vue/runtime-core模块下定义全局变量，比如我们想要在模版里使用 $message这个预定义好的方法：
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$message: (key: LanguageKey, options?: any) => string;
}
}