refactor(#7598): add i18n dynamic typings (#10882)

* refactor: add i18n dynamic typings

* chore: tweak

locales/generateDTS.js

@@ -0,0 +1,72 @@
+const fs = require('fs');
+const yaml = require('js-yaml');
+const ts = require('typescript');
+
+function createMembers(record) {
+	return Object.entries(record)
+		.map(([k, v]) => ts.factory.createPropertySignature(
+			undefined,
+			ts.factory.createStringLiteral(k),
+			undefined,
+			typeof v === 'string'
+				? ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword)
+				: ts.factory.createTypeLiteralNode(createMembers(v)),
+		));
+}
+
+module.exports = function generateDTS() {
+	const locale = yaml.load(fs.readFileSync(`${__dirname}/ja-JP.yml`, 'utf-8'));
+	const members = createMembers(locale);
+	const elements = [
+		ts.factory.createInterfaceDeclaration(
+			[ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+			ts.factory.createIdentifier('Locale'),
+			undefined,
+			undefined,
+			members,
+		),
+		ts.factory.createVariableStatement(
+			[ts.factory.createToken(ts.SyntaxKind.DeclareKeyword)],
+			ts.factory.createVariableDeclarationList(
+				[ts.factory.createVariableDeclaration(
+					ts.factory.createIdentifier('locales'),
+					undefined,
+					ts.factory.createTypeLiteralNode([ts.factory.createIndexSignature(
+						undefined,
+						[ts.factory.createParameterDeclaration(
+							undefined,
+							undefined,
+							ts.factory.createIdentifier('lang'),
+							undefined,
+							ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+							undefined,
+						)],
+						ts.factory.createTypeReferenceNode(
+							ts.factory.createIdentifier('Locale'),
+							undefined,
+						),
+					)]),
+					undefined,
+				)],
+				ts.NodeFlags.Const | ts.NodeFlags.Ambient | ts.NodeFlags.ContextFlags,
+			),
+		),
+		ts.factory.createExportAssignment(
+			undefined,
+			true,
+			ts.factory.createIdentifier('locales'),
+		),
+	];
+	const printed = ts.createPrinter({
+		newLine: ts.NewLineKind.LineFeed,
+	}).printList(
+		ts.ListFormat.MultiLine,
+		ts.factory.createNodeArray(elements),
+		ts.createSourceFile('index.d.ts', '', ts.ScriptTarget.ESNext, true, ts.ScriptKind.TS),
+	);
+
+	fs.writeFileSync(`${__dirname}/index.d.ts`, `/* eslint-disable */
+// This file is generated by locales/generateDTS.js
+// Do not edit this file directly.
+${printed}`, 'utf-8');
+}

packages/frontend/src/i18n.ts

@@ -1,8 +1,9 @@
 import { markRaw } from 'vue';
+import type { Locale } from '../../../locales';
 import { locale } from '@/config';
 import { I18n } from '@/scripts/i18n';
 
-export const i18n = markRaw(new I18n(locale));
+export const i18n = markRaw(new I18n<Locale>(locale));
 
 export function updateI18n(newLocale) {
 	i18n.ts = newLocale;

packages/frontend/vite.config.ts

@@ -6,6 +6,7 @@ import { type UserConfig, defineConfig } from 'vite';
 import ReactivityTransform from '@vue-macros/reactivity-transform/vite';
 
 import locales from '../../locales';
+import generateDTS from '../../locales/generateDTS';
 import meta from '../../package.json';
 import pluginJson5 from './vite.json5';
 
@@ -64,6 +65,10 @@ export function getConfig(): UserConfig {
 					}),
 				]
 				: [],
+			{
+				name: 'locale:generateDTS',
+				buildStart: generateDTS,
+			},
 		],
 
 		resolve: {