feat: make Trans component typesafe

example/app.tsx

@@ -41,7 +41,7 @@ export const App = () => {
 			<div class="flex flex-col gap-4">
 				<h1>
 					<Trans
-						key="welcome"
+						key="nested.welcome"
 						fallback="Welcome, <bold>{{name}}</bold> (<bold>fallback</bold>)!"
 						replace={{ name: name() }}
 						components={{

example/i18next.d.ts

@@ -0,0 +1,14 @@
+// import "i18next";
+
+// import type lang from "./locale/en/lang.json";
+// import type translation from "./locale/en/translation.json";
+
+// declare module "i18next" {
+// 	interface CustomTypeOptions {
+// 		defaultNS: "translation";
+// 		resources: {
+// 			lang: typeof lang;
+// 			translation: typeof translation;
+// 		};
+// 	}
+// }

example/locale/de/translation.json

@@ -1,3 +1,5 @@
 {
-	"welcome": "Willkommen, <bold>{{name}}</bold>!"
+	"nested": {
+		"welcome": "Willkommen, <bold>{{name}}</bold>!"
+	}
 }

example/locale/en/translation.json

@@ -1,3 +1,5 @@
 {
-	"welcome": "Welcome, <bold>{{name}}</bold>!"
+	"nested": {
+		"welcome": "Welcome, <bold>{{name}}</bold>!"
+	}
 }

src/trans.tsx

@@ -1,27 +1,37 @@
-import type { TFunction, TOptions } from "i18next";
+import type { Namespace, ParseKeys, TFunction, TOptions } from "i18next";
 import { type Component, createMemo, type JSX } from "solid-js";
 import { useTranslation } from "./use-translation.ts";
 
 export type TransEmbeddedComponent = Component<{ children?: string }>;
 
-export type TransProps = {
-	key: string;
+export type TransProps<
+	Key extends ParseKeys<Ns, TOpt, KPrefix>,
+	Ns extends Namespace,
+	KPrefix = undefined,
+	TOpt extends TOptions = TOptions,
+> = {
+	key: Key | Key[];
 	fallback?: string;
 
 	components?: Record<string, TransEmbeddedComponent>;
-	replace?: TOptions["replace"];
+	replace?: TOpt["replace"];
 
-	t?: TFunction;
-	options?: TOptions;
+	t?: TFunction<Ns, KPrefix>;
+	options?: TOpt;
 };
 
-export const Trans: Component<TransProps> = (props) => {
+export const Trans = <
+	Key extends ParseKeys<Ns, TOpt, KPrefix>,
+	Ns extends Namespace,
+	KPrefix = undefined,
+	TOpt extends TOptions = TOptions,
+>(
+	props: TransProps<Key, Ns, KPrefix, TOpt>,
+): JSX.Element => {
 	const [contextT] = useTranslation(() => props.options?.ns);
 
 	const t = ((...args: Parameters<TFunction>) =>
-		props.t
-			? props.t(...(args as Parameters<TFunction>))
-			: contextT(...(args as Parameters<TFunction>))) as TFunction;
+		props.t ? props.t(...args) : contextT(...args)) as TFunction;
 
 	const mergedOptions = createMemo(
 		(): TOptions => ({