feat(translate): typed keys for translate pipe

Author: GuyHaviv37

projects/ngx-translate/src/lib/translate.pipe.ts

@@ -9,15 +9,15 @@ import { InterpolationParameters, Translation } from "./translate.service.interf
     standalone: true,
     pure: false, // required to update the value when the signal changes
 })
-export class TranslatePipe implements PipeTransform {
-    private translateService = inject(TranslateService);
+export class TranslatePipe<Key extends string = string> implements PipeTransform {
+    private translateService = inject<TranslateService<Key>>(TranslateService<Key>);
 
     private cachedSignal: Signal<Translation> | null = null;
     private lastKey: string | null = null;
     private lastParams: InterpolationParameters | undefined;
 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    transform(query: string | undefined | null, ...args: any[]): any {
+    transform(query: Key | undefined | null, ...args: any[]): any {
         if (!query || !query.length) {
             return query;
         }

projects/ngx-translate/src/tests/translate.service.type-safety.spec.ts

@@ -0,0 +1,61 @@
+import { TestBed } from "@angular/core/testing"
+import { provideTranslateLoader, TranslatePipe, TranslateService, TranslationObject } from "../public-api"
+import { provideTestableTranslateService, FakeLoader } from "./test-helpers"
+
+const translations: TranslationObject = {a: "A", b: {"a": "BA", "b": "BB"}, c: "C"}
+type MyKeys = "a" | "b.a" | "b.b" | "c";
+
+describe('Key type safety tests', () => {
+    it('should not have typescript errors when using TranslateService', () => {
+        TestBed.configureTestingModule({
+            providers: [
+                provideTestableTranslateService({
+                    loader: provideTranslateLoader(FakeLoader),
+                }),
+            ],
+        });
+        const translate = TestBed.inject<TranslateService<MyKeys>>(TranslateService<MyKeys>);
+        translate.setTranslation("en", translations);
+        translate.use("en");
+
+        translate.instant('a');
+        translate.stream('b.a');
+        translate.get('b.b');
+
+        // @ts-expect-error
+        translate.get('c.c');
+        // @ts-expect-error
+        translate.get('b');
+
+        expect(translate.instant('a')).toBe("A");
+    })
+
+    it('should not have typescript errors when using TranslatePipe', () => {
+        TestBed.configureTestingModule({
+            providers: [
+                provideTestableTranslateService({
+                    loader: provideTranslateLoader(FakeLoader),
+                }),
+                {
+                    provide: TranslatePipe,
+                    useClass: TranslatePipe,
+                }
+            ],
+        });
+        const translate = TestBed.inject<TranslateService<MyKeys>>(TranslateService<MyKeys>);
+        const translatePipe = TestBed.inject<TranslatePipe<MyKeys>>(TranslatePipe<MyKeys>);
+        translate.setTranslation("en", translations);
+        translate.use("en");
+
+        translatePipe.transform('a');
+        translatePipe.transform('b.a');
+        translatePipe.transform('b.b');
+
+        // @ts-expect-error
+        translatePipe.transform('c.c');
+        // @ts-expect-error
+        translatePipe.transform('b');
+
+        expect(translatePipe.transform('b.a')).toBe("BA");
+    })
+})