English | 中文
Are you always copy and paste duplicate i18n code like t('home:submit')
t('common:something:success')
. It take working slowly, and you are very easy to make typo if you don't recheck words carefully.
I don't like that way, I prefer to write code as a chain like i18n.common.something.success
with typescript
checking. So, why not try this package?
IE | Edge | Chrome | Firefox | Safari | Node |
---|---|---|---|---|---|
9+ | 12+ | 5+ | 4+ | 5+ | * |
// ./src/i18n/locales/en.ts
const en = {
button: {
submit: 'Submit',
cancel: 'Go back',
},
user: {
profile: 'Tom',
},
};
export default en;
export type Locale = typeof en;
// ./src/i18n/locales/zh.ts
import { Locale } from './en';
const zh: Locale = {
button: {
submit: '提交',
cancel: '返回',
},
user: {
profile: '原罪',
},
};
export default zh;
// ./src/i18n/index.ts
import { createI18n } from '@i18n-chain/*';
import en from './locales/en';
const i18n = createI18n({
defaultLocale: {
key: 'en',
values: en,
},
});
export default i18n;
First way, define immediately.
import { createI18n } from '@i18n-chain/*';
import zh from './locales/zh';
const i18n = createI18n({
defaultLocale: { ... },
});
i18n._.define('zh', zh);
export default i18n;
Second way, async import. loader will be invoked when locales doesn't defined.
const i18n = createI18n({
defaultLanguage: { ... },
loader: (name) => import('./locales/' + name),
});
export default i18n;
i18n._.locale('zh');
Feel free to try i18n._.t('button.submit')
and i18n.button.submit
, they have the same effect. Unfortunately, you can't enjoy type checking by using chain._.t('xx.yy.zz')
.
You are required to use array to define template when parameters exist.
const en = {
property: ['{{property1}}template{{property2}}', { property1: value2, property2: value2 }],
};
The second element in array is an object that is default value of template.
const en = {
user: {
profile: [
'My name is {{name}}, I born in {{country}}, I am {{age}} old now, my birthday is {{birthday}}',
{
country: undefined,
name: 'Tom',
age: (value: number = 20) => {
if (value <= 1) {
return `${value} year`;
} else {
return `${value} years`;
}
},
birthday: (value: Date) => {
return value.toString();
},
},
],
},
};
////////////////////////////////////
// The above code equivalent to definition below: (automatically)
interface User {
Profile {
country: string | number;
name?: string;
age?: number;
birthday: Date;
}
}
/////////////////////////////////////
// Minium configuration
i18n.user.profile({
age: 20,
country: 'China',
});
// Append optional property `name`
i18n.user.profile({
age: 30,
country: 'Usa',
name: 'Lucy',
});
The primary difference between method age
and birthday
is: age
has default parameter (value: number = 20) => {...}
but birthday
doesn't have. It's optional to input value to property who has default parameter value on function.
Set undefined
to property if you want to force input value when invoking method.
const en = {
template: ['Hello, {{world}}', { world: undefined }]
};
Platforms | I18n |
---|---|
React & React-Native | @i18n-chain/react |
Vue | Coming soon... |
Angular | Coming soon... |
Taro | @i18n-chain/taro |
NodeJs & Vanilla-Js | @i18n-chain/core |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。