fix: i18n tsc

src/@types/i18n.d.ts

@@ -0,0 +1,33 @@
+import 'i18next';
+
+import translation from '../../public/locales/en/translation.json';
+import string from '../../public/locales/en/string.json';
+import number from '../../public/locales/en/number.json';
+import video from '../../public/locales/en/video.json';
+import list from '../../public/locales/en/list.json';
+import json from '../../public/locales/en/json.json';
+import time from '../../public/locales/en/time.json';
+import csv from '../../public/locales/en/csv.json';
+import pdf from '../../public/locales/en/pdf.json';
+import audio from '../../public/locales/en/audio.json';
+import xml from '../../public/locales/en/xml.json';
+import image from '../../public/locales/en/image.json';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: {
+      translation: typeof translation;
+      string: typeof string;
+      number: typeof number;
+      video: typeof video;
+      list: typeof list;
+      json: typeof json;
+      time: typeof time;
+      csv: typeof csv;
+      pdf: typeof pdf;
+      audio: typeof audio;
+      xml: typeof xml;
+      image: typeof image;
+    };
+  }
+}

src/components/Hero.tsx

@@ -18,7 +18,7 @@ import { useNavigate } from 'react-router-dom';
 import { Icon } from '@iconify/react';
 import { getToolCategoryTitle } from '@utils/string';
 import { useTranslation } from 'react-i18next';
-import { validNamespaces } from '../i18n';
+import { FullI18nKey, validNamespaces } from '../i18n';
 import {
   getBookmarkedToolPaths,
   isBookmarked,
@@ -42,7 +42,7 @@ const GroupItems = styled('ul')({
 });
 
 type ToolInfo = {
-  label: string;
+  label: FullI18nKey;
   url: string;
 };
 
@@ -58,39 +58,39 @@ export default function Hero() {
 
   const exampleTools: ToolInfo[] = [
     {
-      label: t('translation:hero.examples.createTransparentImage'),
+      label: 'translation:hero.examples.createTransparentImage',
       url: '/image-generic/create-transparent'
     },
     {
-      label: t('translation:hero.examples.prettifyJson'),
+      label: 'translation:hero.examples.prettifyJson',
       url: '/json/prettify'
     },
     {
-      label: t('translation:hero.examples.changeGifSpeed'),
+      label: 'translation:hero.examples.changeGifSpeed',
       url: '/gif/change-speed'
     },
     {
-      label: t('translation:hero.examples.sortList'),
+      label: 'translation:hero.examples.sortList',
       url: '/list/sort'
     },
     {
-      label: t('translation:hero.examples.compressPng'),
+      label: 'translation:hero.examples.compressPng',
       url: '/png/compress-png'
     },
     {
-      label: t('translation:hero.examples.splitText'),
+      label: 'translation:hero.examples.splitText',
       url: '/string/split'
     },
     {
-      label: t('translation:hero.examples.splitPdf'),
+      label: 'translation:hero.examples.splitPdf',
       url: '/pdf/split-pdf'
     },
     {
-      label: t('translation:hero.examples.trimVideo'),
+      label: 'translation:hero.examples.trimVideo',
       url: '/video/trim'
     },
     {
-      label: t('translation:hero.examples.calculateNumberSum'),
+      label: 'translation:hero.examples.calculateNumberSum',
       url: '/number/sum'
     }
   ];
@@ -117,7 +117,7 @@ export default function Hero() {
           if (tool === undefined) {
             return [];
           }
-          return [{ ...tool, label: t(tool.label) }];
+          return [tool];
         })
       : exampleTools;
 
@@ -256,7 +256,7 @@ export default function Hero() {
               }}
             >
               <Stack direction={'row'} spacing={1} alignItems={'center'}>
-                <Typography textAlign={'center'}>{tool.label}</Typography>
+                <Typography textAlign={'center'}>{t(tool.label)}</Typography>
                 {bookmarkedToolPaths.length > 0 && (
                   <IconButton
                     onClick={(e) => {

src/i18n/index.ts

@@ -1,8 +1,8 @@
-import i18n, { ParseKeys } from 'i18next';
+import i18n, { Namespace, ParseKeys } from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
 
-export const validNamespaces: (string | 'translation')[] = [
+export const validNamespaces = [
   'string',
   'number',
   'video',
@@ -15,7 +15,8 @@ export const validNamespaces: (string | 'translation')[] = [
   'xml',
   'translation',
   'image'
-];
+] as const satisfies readonly Namespace[];
+
 export type I18nNamespaces = (typeof validNamespaces)[number];
 export type FullI18nKey = {
   [K in I18nNamespaces]: `${K}:${ParseKeys<K>}`;

src/pages/tools/number/generic-calc/index.tsx

@@ -27,6 +27,7 @@ import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTranslation } from 'react-i18next';
+import { validNamespaces } from '../../../../i18n';
 
 function numericSolveEquationFor(
   equation: string,
@@ -62,7 +63,7 @@ export default async function makeTool(
 
   return function GenericCalc({ title }: ToolComponentProps) {
     const { showSnackBar } = useContext(CustomSnackBarContext);
-    const { t } = useTranslation();
+    const { t } = useTranslation(validNamespaces);
     const theme = useTheme();
     const lessThanSmall = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -239,7 +240,9 @@ export default async function makeTool(
         initialValues={initialValues}
         toolInfo={{
           title: t(calcData.i18n.name),
-          description: t(calcData.i18n.longDescription)
+          description: calcData.i18n.longDescription
+            ? t(calcData.i18n.longDescription)
+            : undefined
         }}
         verticalGroups
         // @ts-ignore

src/tools/defineTool.tsx

@@ -1,7 +1,7 @@
 import ToolLayout from '../components/ToolLayout';
 import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
 import { IconifyIcon } from '@iconify/react';
-import { FullI18nKey } from '../i18n';
+import { FullI18nKey, validNamespaces } from '../i18n';
 import { useTranslation } from 'react-i18next';
 
 export interface ToolMeta {
@@ -63,7 +63,7 @@ export const defineTool = (
     shortDescription: i18n.shortDescription,
     keywords,
     component: function ToolComponent() {
-      const { t } = useTranslation();
+      const { t } = useTranslation(validNamespaces);
       return (
         <ToolLayout
           icon={icon}

src/tools/index.ts

@@ -144,7 +144,7 @@ const categoriesConfig: {
 export const filterTools = (
   tools: DefinedTool[],
   query: string,
-  t: TFunction<I18nNamespaces>
+  t: TFunction<I18nNamespaces[]>
 ): DefinedTool[] => {
   if (!query) return tools;