@liuli-util/rollup-plugin-i18next-dts-gen
v0.4.4
Published
## Scenes
Downloads
76
Readme
@liuli-util/rollup-plugin-i18next-dts-gen
Scenes
We have some projects that need to use i18next to handle internationalization, but the use of typescript requires type definitions, so @liuli-util/i18next-dts-gen is used to automatically generate .d.ts files. But later we found that this process can be integrated into the build, no need to start a separate terminal command, currently supports direct integration into the rollup/vite build process.
Quick start
Install
pnpm i -D i18next @liuli-util/rollup-plugin-i18next-dts-gen
Add the translated json file under src/i18n/, add two examples below
// src/i18n/en-US.json
{
"hello": "hello world",
"toggle": "Switch language"
}
// src/i18n/zh-CN.json
{
"hello": "Hello, world",
"toggle": "Switch language"
}
Configure vite.config.ts
import { defineConfig } from 'vite'
import { i18nextDtsGen } from '@liuli-util/rollup-plugin-i18next-dts-gen'
export default defineConfig({
plugins: [
i18nextDtsGen({
dirs: ['src/i18n'],
}),
],
})
Start the local server
pnpm dev
You will find that the index.d.ts
type definition is automatically generated in the src/i18n/ directory, roughly as follows
export type TranslateType = {
hello: {
value: 'hello world'
params: [key: 'hello']
}
toggle: {
value: 'Switch language'
params: [key: 'toggle']
}
}
Then you can use this type for prompting or verification. Below is the simplest example. For more detailed examples combining react, please refer to rollup-plugin-i18next-dts-gen-example.
/**
* Get the translated text according to the key
* @param args
*/
function t<K extends keyof TranslateType>(...args: T[K]['params']): T[K]['value'] {
// @ts-ignore
return i18next.t(args[0], args[1])
}
console.log(t('hello'))
Configuration
export interface GenerateOptions {
// Multiple i18n directories can be specified, and the json file will be scanned in each subdirectory and the corresponding .d.ts will be generated
dirs: string[]
}