Is there a way to have the translationKey strongly typed? #721

opolo · 2021-11-05T15:16:41Z

Hi there!

Thanks for a great library :)

Question regarding Typescript:
We have a Typescript solution using this library. However, we have not been able to find a way to make the translation-key provided to t() be strongly typed. The type of t seems to be t(string) no matter what we do.

Is it possible to make the input to the t() function strongly typed based on our json files with the localizations? It would help us a lot in avoiding typos.

Thanks! :)

NB. We tried downloading the complex typescript example, but that also seemed to allow any string as input to the t-function.

ajmnz · 2021-11-11T12:33:35Z

I solved it using the following custom hook

// util-types.ts

type Join<S1, S2> = S1 extends string
  ? S2 extends string
    ? `${S1}.${S2}`
    : never
  : never;

export type Paths<T> = {
  [K in keyof T]: T[K] extends Record<string, unknown>
    ? Join<K, Paths<T[K]>>
    : K;
}[keyof T];

// useTypeSafeTranslation.ts

import useTranslation from "next-translate/useTranslation";
import { TranslationQuery } from "next-translate";
import { Paths } from "../types/util-types";

import common from "../../locales/es-es/common.json";
import home from "../../locales/es-es/home.json";
import catalog from "../../locales/es-es/catalog.json";
import auth from "../../locales/es-es/auth.json";

export type TranslationKeys = {
  common: Paths<typeof common>;
  home: Paths<typeof home>;
  catalog: Paths<typeof catalog>;
  auth: Paths<typeof auth>;
};

export const useTypeSafeTranslation = <T extends keyof TranslationKeys>(
  ns: T
) => {
  const { t, lang } = useTranslation(ns);

  return {
    t: (
      s: TranslationKeys[T],
      q?: TranslationQuery,
      o?: {
        returnObjects?: boolean;
        fallback?: string | string[];
        default?: string;
      }
    ) => t(s, q, o),
    lang,
  };
};

And then you just pass the namespace to the hook, and you have a type safe t function

import React from "react";
import { useTypeSafeTranslation } from "./useTypeSafeTranslation";

interface TestComponentProps {}

export const TestComponent: React.FC<TestComponentProps> = () => {
  const { t } = useTypeSafeTranslation("common");

  return <>{t("footer.legal.paymentMethods")}</>;
}
;

Adapted from https://github.com/benawad/dogehouse

osdiab · 2021-11-12T06:30:30Z

Here's my simplified version FYI, that just patches t and adds a minimum amount of code:

import type { I18n, Translate } from "next-translate";
import useTranslation from "next-translate/useTranslation";

import type { TranslationsKeys } from "src/utility/i18n/available-translations";

type Tail<T> = T extends [unknown, ...infer Rest] ? Rest : never;

export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, "t"> {
  t: (
    key: TranslationsKeys[Namespace],
    ...rest: Tail<Parameters<Translate>>
  ) => string;
}

export function useTypeSafeTranslation<
  Namespace extends keyof TranslationsKeys
>(namespace: Namespace): TypeSafeTranslate<Namespace> {
  return useTranslation(namespace);
}

And I also just use import type for all the translations to be extra sure they don't accidentally get bundled (tree shaking has always been a little finnicky for me). I then added a lint rule with ESLint to error whenever users in my codebase try to use useTranslation directly, which if they really need to, can disable with an ESLint disable comment. Working on an equivalent helper for Trans.

osdiab · 2021-11-12T07:24:44Z

Here's a helper for Trans:

import UnsafeTrans from "next-translate/Trans";
import type { TransProps as UnsafeTransProps } from "next-translate";

import type { TranslationsKeys } from "src/utility/i18n/available-translations";

export interface TransProps<Namespace extends keyof TranslationsKeys>
  extends Omit<UnsafeTransProps, "i18nKey"> {
  i18nKey: `${Namespace}:${TranslationsKeys[Namespace]}`;
}

export function Trans<Namespace extends keyof TranslationsKeys>(
  props: TransProps<Namespace>
): JSX.Element {
  return <UnsafeTrans {...props} />;
}

osdiab · 2021-11-12T08:26:57Z

next update i'll post is to change the Paths type to support this library's _ prefixed pluralization rules; the nested plurals sound harder to express in TypeScript.

ChristoRibeiro · 2022-02-25T14:04:53Z

@osdiab what looks like your file?

import type { TranslationsKeys } from "src/utility/i18n/available-translations";

osdiab · 2022-02-26T11:56:10Z

Like this:

import type userProfile from "locales/en/user-profile.json";
import type common from "locales/en/common.json";

type Join<S1, S2> = S1 extends string
  ? S2 extends string
    ? `${S1}.${S2}`
    : never
  : never;

export type Paths<T> = {
  [K in keyof T]: T[K] extends Record<string, unknown>
    ? Join<K, Paths<T[K]>>
    : K;
}[keyof T];

export interface TranslationsKeys {
  common: Paths<typeof common>;
  "user-profile": Paths<typeof userProfile>;
}

It's a little annoying that I have to add this boilerplate to get the types of the locales - but I bet can make a script that does this kind of thing automatically.

elementrics · 2022-05-29T09:45:04Z

another way with this generator: https://www.npmjs.com/package/next-translate-localekeys. Is able to work with the basics for generating locale keys that are available and can be inserted in the useTranslation hook

kuus · 2022-06-30T18:17:55Z

for those who are interested in a working example I setup my solution for this matter in this library https://github.com/knitkode/koine/blob/main/packages/next/types-i18n.ts
it allows to augment the namespace Koine with type NextTranslations whose keys point to the defaultLocale translation files,

PS: I am also wrapping useT and the other methods tweaking some behaviours, so there is more than type safety in that library

quyctd · 2022-09-25T09:12:51Z

@saschahapp nice work 🚀

quyctd · 2022-10-05T11:04:24Z

Is there any way to support type-safe params too?

elementrics · 2022-10-05T13:21:07Z

@quyctd my package does not currently support that. But if this would be an improvement, I would gladly add it.

quyctd · 2022-10-06T03:26:33Z

@saschahapp Yes, please consider it. Since Next.js usually come with typescript, having type-safe for both keys and params will be awesome 🚀

mleister97 · 2022-10-11T13:56:52Z

@osdiab Any news on pluralization?

osdiab · 2022-10-12T00:38:40Z

No, haven’t really focused on that issue as of late. Omar

…

On Tue, Oct 11 2022 at 10:57 PM, mleister97 ***@***.***> wrote: @osdiab <https://github.com/osdiab> Any news on pluralization? — Reply to this email directly, view it on GitHub <#721 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAONU3W37AJHZBTIAHK2EDDWCVW27ANCNFSM5HOCJ7EA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

luixo · 2023-03-04T12:30:52Z

Are there any plans to integrate this feature into the library?
i18next does that and it is the only feature that stops me from migrating to next-translate.

aralroca · 2023-03-05T07:27:58Z

Yes, we are going to priorize this. However feel free to PR 👍😊

boredland · 2023-05-05T21:27:00Z

@osdiab Any news on pluralization?

You could just clean up the resulting paths using this:

type RemoveSuffix<Key extends string> = Key extends `${infer Prefix}${
  | "_zero"
  | "_one"
  | "_two"
  | "_few"
  | "_many"
  | "_other"}`
  ? Prefix
  : Key;

X7Becka · 2023-05-10T12:24:45Z

I solved it using the following custom hook

// util-types.ts

type Join<S1, S2> = S1 extends string
  ? S2 extends string
    ? `${S1}.${S2}`
    : never
  : never;

export type Paths<T> = {
  [K in keyof T]: T[K] extends Record<string, unknown>
    ? Join<K, Paths<T[K]>>
    : K;
}[keyof T];

// useTypeSafeTranslation.ts

import useTranslation from "next-translate/useTranslation";
import { TranslationQuery } from "next-translate";
import { Paths } from "../types/util-types";

import common from "../../locales/es-es/common.json";
import home from "../../locales/es-es/home.json";
import catalog from "../../locales/es-es/catalog.json";
import auth from "../../locales/es-es/auth.json";

export type TranslationKeys = {
  common: Paths<typeof common>;
  home: Paths<typeof home>;
  catalog: Paths<typeof catalog>;
  auth: Paths<typeof auth>;
};

export const useTypeSafeTranslation = <T extends keyof TranslationKeys>(
  ns: T
) => {
  const { t, lang } = useTranslation(ns);

  return {
    t: (
      s: TranslationKeys[T],
      q?: TranslationQuery,
      o?: {
        returnObjects?: boolean;
        fallback?: string | string[];
        default?: string;
      }
    ) => t(s, q, o),
    lang,
  };
};

And then you just pass the namespace to the hook, and you have a type safe t function

import React from "react";
import { useTypeSafeTranslation } from "./useTypeSafeTranslation";

interface TestComponentProps {}

export const TestComponent: React.FC<TestComponentProps> = () => {
  const { t } = useTypeSafeTranslation("common");

  return <>{t("footer.legal.paymentMethods")}</>;
}
;

Adapted from https://github.com/benawad/dogehouse

This little rework could help us to get dicwords from another namespaces different to default which sets in useTypeSafeTranslation.

import useTranslation from "next-translate/useTranslation";
import type { TranslationQuery } from "next-translate";
import type ProfileEn from "@/../locales/en/profile.json";
import type CommonEn from "@/../locales/en/common.json";
import type ProfileRu from "@/../locales/ru/profile.json";
import type CommonRu from "@/../locales/ru/common.json";

type Join<S1, S2> = S1 extends string
  ? S2 extends string
    ? `${S1}.${S2}`
    : never
  : never;

export type Paths<T> = {
  [K in keyof T]: T[K] extends Record<string, unknown>
    ? Join<K, Paths<T[K]>>
    : K;
}[keyof T];

type All<T> = {
  [Ns in keyof T]: `${Extract<Ns, string>}:${Extract<T[Ns], string>}`;
}[keyof T];

export interface TranslationKeys {
  common: Paths<typeof CommonRu & typeof CommonEn>;
  profile: Paths<typeof ProfileRu & typeof ProfileEn>;
}

export const useTypeSafeTranslation = <T extends keyof TranslationKeys>(
  ns: T
) => {
  const { t, lang } = useTranslation(ns);

  return {
    t: (
      s: TranslationKeys[T] | All<Omit<TranslationKeys, T>>,
      q?: TranslationQuery,
      o?: {
        returnObjects?: boolean;
        fallback?: string | string[];
        default?: string;
      }
    ) => t(s, q, o),
    lang,
  };
};

aralroca · 2023-05-10T14:09:15Z

Feel free to PR improving the types

eddyhdzg-solarx · 2023-06-17T23:07:19Z

My current implementation works good with next.js 13 app directory.

next-translate.d.ts

import type { I18n, Translate } from "next-translate";
import type common from "~/../locales/en/common.json";
import type home from "~/../locales/en/home.json";

type Join<S1, S2> = S1 extends string
  ? S2 extends string
    ? `${S1}.${S2}`
    : never
  : never;

export type Paths<T> = {
  [K in keyof T]: T[K] extends Record<string, unknown>
    ? Join<K, Paths<T[K]>>
    : K;
}[keyof T];

export interface TranslationsKeys {
  common: Paths<typeof common>;
  home: Paths<typeof home>;
}

export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, "t"> {
  t: (
    key: TranslationsKeys[Namespace],
    ...rest: Tail<Parameters<Translate>>
  ) => string;
}

declare module "next-translate/useTranslation" {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys,
  >(namespace: Namespace): TypeSafeTranslate<Namespace>;
}

aralroca · 2023-07-15T09:59:18Z

I modified the last example allowing plurals:

t('example', { count: 5 });  // example_other

exact matches:

t('example', { count: 99 }); // example_99

and tagged template string:

t`example` // example

next-translate.d.ts:

import type { I18n, Translate } from "next-translate";

type RemovePlural<Key extends string> = Key extends `${infer Prefix}${| "_zero"
  | "_one"
  | "_two"
  | "_few"
  | "_many"
  | "_other"
  | `_${infer Num}`}`
  ? Prefix
  : Key;

type Join<S1, S2> = S1 extends string
  ? S2 extends string
  ? `${S1}.${S2}`
  : never
  : never;

export type Paths<T> = RemovePlural<{
  [K in keyof T]: T[K] extends Record<string, unknown>
  ? Join<K, Paths<T[K]>>
  : K;
}[keyof T]>;

export interface TranslationsKeys {
  common: Paths<typeof import("./locales/en/common.json")>;
  home: Paths<typeof import("./locales/en/home.json")>;
}

export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, "t"> {
  t: {
    (key: TranslationsKeys[Namespace], ...rest: Tail<Parameters<Translate>>): string;
    <T extends string>(template: TemplateStringsArray): string;
  };
}

declare module "next-translate/useTranslation" {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys,
  >(namespace: Namespace): TypeSafeTranslate<Namespace>;
}

I am thinking of adding a new configuration property to auto-generate and update this file as new namespaces are added. What do you think about this? 🤔

osdiab · 2023-07-16T00:03:55Z

Sounds like a good idea to me :) Omar

…

On Sat, Jul 15 2023 at 6:59 PM, Aral Roca Gomez ***@***.***> wrote: I modified the last example allowing plurals: t('example', { count: 5 }); // example_other exact matches: t('example', { count: 99 }); // example_99 and tagged template string: t`example` // example *next-translate.d.ts*: import type { I18n, Translate } from "next-translate";import type common from "./locales/en/common.json";import type home from "./locales/en/home.json"; type RemovePlural<Key extends string> = Key extends `${infer Prefix}${| "_zero" | "_one" | "_two" | "_few" | "_many" | "_other" | `_${infer Num}`}` ? Prefix : Key; type Join<S1, S2> = S1 extends string ? S2 extends string ? `${S1}.${S2}` : never : never; export type Paths<T> = { [K in keyof T]: T[K] extends Record<string, unknown> ? Join<K, Paths<T[K]>> : K;}[keyof T]; export interface TranslationsKeys { common: RemovePlural<Paths<typeof common>>; home: RemovePlural<Paths<typeof home>>;} type TranslateKey<T> = T extends string ? RemovePlural<Paths<typeof common>> : never; export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys> extends Omit<I18n, "t"> { t: { (key: TranslationsKeys[Namespace], ...rest: Tail<Parameters<Translate>>): string; <T extends string>(template: TemplateStringsArray, ...keys: TranslateKey<T>[]): string; };} declare module "next-translate/useTranslation" { export default function useTranslation< Namespace extends keyof TranslationsKeys, >(namespace: Namespace): TypeSafeTranslate<Namespace>;} I am thinking of adding a new configuration property to auto-generate and update this file as new namespaces are added. What do you think about this? [image: 🤔] — Reply to this email directly, view it on GitHub <#721 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAONU3RFAT6SMYQFE57QRW3XQJSYDANCNFSM5HOCJ7EA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

aralroca · 2023-07-16T03:38:59Z

I'd really like to find an elegant way to do it without needing to create next-translate.d.ts, but relying on the JSONs of the namespaces that everyone puts in is not clear to me. I don't know if pulling the types from the namespaces defined in the i18n.js file would work or not. Also it depends on where people have these namespaces, if it is the default form (inside locales/lang/namespace.json) maybe it could work. Well I'll investigate a bit more and see.

aralroca · 2023-07-17T18:25:44Z

for now I did a little improvement in 2.5 to simplify the next-translate.d.ts file:

Example:

import type { Paths, I18n, Translate } from 'next-translate'

export interface TranslationsKeys {
  // Example with "common" and "home" namespaces in "en" (the default language):
  common: Paths<typeof import('./locales/en/common.json')>
  home: Paths<typeof import('./locales/en/home.json')>
  // Specify here all the namespaces you have...
}

export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, 't'> {
  t: {
    (
      key: TranslationsKeys[Namespace],
      ...rest: Tail<Parameters<Translate>>
    ): string
    <T extends string>(template: TemplateStringsArray): string
  }
}

declare module 'next-translate/useTranslation' {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys
  >(namespace: Namespace): TypeSafeTranslate<Namespace>
}

sandrooco · 2023-07-27T08:03:53Z

@aralroca Thank you for pushing this forward!
Unfortunately I can't get it to work - is it really only this snippet that needs to be added? I also tried adding it to tsconfig.json in the include array.

Edit: I had to include the namespace in useTranslation() - default ns won't work out of the box.
Additional question: what if returnObjects is set to true? Obviously string won't work. Any idea on how we could set proper types for objects?

aralroca · 2023-07-27T12:48:20Z

@sandrooco it should work in the latest next-translate version. The implementation supports these 2 scenarios:

namespaces in useTranslation

keys in t:

goes no further. No matter what parameters you use, withreturnObjects these behaviors should work the same.

valerioleo · 2023-07-28T10:58:53Z

Thanks for adding this feature! very helpful!

However, I have tried to add it and I get two errors with this code:

for now I did a little improvement in 2.5 to simplify the next-translate.d.ts file:

Example:

import type { Paths, I18n, Translate } from 'next-translate'

export interface TranslationsKeys {
  // Example with "common" and "home" namespaces in "en" (the default language):
  common: Paths<typeof import('./locales/en/common.json')>
  home: Paths<typeof import('./locales/en/home.json')>
  // Specify here all the namespaces you have...
}

export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, 't'> {
  t: {
    (
      key: TranslationsKeys[Namespace],
      ...rest: Tail<Parameters<Translate>>
    ): string
    <T extends string>(template: TemplateStringsArray): string
  }
}

declare module 'next-translate/useTranslation' {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys
  >(namespace: Namespace): TypeSafeTranslate<Namespace>
}

That Tail is not defined. I tried to recreate it myself with something like:
type Tail<T extends readonly any[]> = T extends readonly [any, ...infer TT] ? TT : [];
but I'm not sure this is the exact implementation
in <T extends string>(template: TemplateStringsArray): string,
we have defined the generic T but never used. I imagine this is the intended code?
<T extends string>(template: TemplateStringsArray): T

Thanks again for this library!

aralroca · 2023-07-28T15:38:21Z

@valerioleo probably depends on the TypeScript version. Feel free to PR these missing parts.

About TemplateStringsArray the only thing is ignore these cases:

t`some.key`

because for now is not possible to strong type the content of some.key in template strings.

SutuSebastian · 2023-09-08T12:38:57Z

@aralroca Thank you for pushing this forward! Unfortunately I can't get it to work - is it really only this snippet that needs to be added? I also tried adding it to tsconfig.json in the include array.

Edit: I had to include the namespace in useTranslation() - default ns won't work out of the box. Additional question: what if returnObjects is set to true? Obviously string won't work. Any idea on how we could set proper types for objects?

Here is a functional version that defaults to "common" namespace while also allowing it to be overridable:

import type { I18n, Paths, Translate } from "next-translate";

import EN from "@/locales/en/common.json";

interface TranslationsKeys {
  common: Paths<typeof EN>;
}

interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, "t"> {
  t: {
    (
      key: TranslationsKeys[Namespace],
      ...rest: Tail<Parameters<Translate>>
    ): string;
    <T extends string>(template: TemplateStringsArray): string;
  };
}

declare module "next-translate/useTranslation" {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys,
  >(namespace: Namespace = "common"): TypeSafeTranslate<Namespace>;
}

Example

t() function:

useTranslate() hook:

SutuSebastian · 2023-09-08T12:39:36Z

Thanks for adding this feature! very helpful!

However, I have tried to add it and I get two errors with this code:
for now I did a little improvement in 2.5 to simplify the next-translate.d.ts file:

Release notes: https://github.com/aralroca/next-translate-plugin/releases/tag/2.5.0

Docs: https://github.com/aralroca/next-translate/blob/2.5.0/docs/type-safety.md

Example:
import type { Paths, I18n, Translate } from 'next-translate'

export interface TranslationsKeys {
  // Example with "common" and "home" namespaces in "en" (the default language):
  common: Paths<typeof import('./locales/en/common.json')>
  home: Paths<typeof import('./locales/en/home.json')>
  // Specify here all the namespaces you have...
}

export interface TypeSafeTranslate<Namespace extends keyof TranslationsKeys>
  extends Omit<I18n, 't'> {
  t: {
    (
      key: TranslationsKeys[Namespace],
      ...rest: Tail<Parameters<Translate>>
    ): string
    <T extends string>(template: TemplateStringsArray): string
  }
}

declare module 'next-translate/useTranslation' {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys
  >(namespace: Namespace): TypeSafeTranslate<Namespace>
}
That Tail is not defined. I tried to recreate it myself with something like:
type Tail<T extends readonly any[]> = T extends readonly [any, ...infer TT] ? TT : [];
but I'm not sure this is the exact implementation

in <T extends string>(template: TemplateStringsArray): string,
we have defined the generic T but never used. I imagine this is the intended code?
<T extends string>(template: TemplateStringsArray): T

Thanks again for this library!

Outdated typescript version might be the case here.

abuu-u · 2023-09-08T13:57:54Z

this is what i use

typed namespaces in options.ns as useTranslation, if you provide other ns in options, keys you can pass to t() will also change
t() will return string or if options.returnObjects: true then it will return object

next-translate.d.ts

import { FieldPath, FieldPathValue, FieldValues } from './tr'

export type TranslationsKeys = {
  // I use custom loadLocaleFrom
  common: typeof import('@/app/ru.json')
  index: typeof import('@/app/[lang]/(index)/ru.json')
  contacts: typeof import('@/app/[lang]/contacts/ru.json')
}

export type Tr<
  TFieldValues extends Record<Namespace, FieldValues>,
  Namespace extends keyof TranslationsKeys,
> = Omit<I18n, 't'> & {
  t: <
    TFieldName extends FieldPath<
      TFieldValues[[OtherNamespace] extends [never]
        ? Namespace
        : OtherNamespace]
    >,
    ReturnObjects extends boolean = false,
    OtherNamespace extends keyof TranslationsKeys = never,
  >(
    key: TFieldName,
    query?: TranslationQuery | null,
    options?: {
      returnObjects?: ReturnObjects
      fallback?: string | string[]
      default?: FieldPathValue<
        TFieldValues[[OtherNamespace] extends [never]
          ? Namespace
          : OtherNamespace],
        TFieldName
      >
      ns?: OtherNamespace
    },
  ) => ReturnObjects extends true
    ? FieldPathValue<
        TFieldValues[[OtherNamespace] extends [never]
          ? Namespace
          : OtherNamespace],
        TFieldName
      >
    : string
}

declare module 'next-translate/useTranslation' {
  export default function useTranslation<
    Namespace extends keyof TranslationsKeys,
  >(namespace: Namespace): Tr<TranslationsKeys, Namespace>
}

tr.d.ts (types ripped from react-hook-form)

export type BrowserNativeObject = Date | FileList | File

export type Primitive =
  | null
  | undefined
  | string
  | number
  | boolean
  | symbol
  | bigint

export type IsEqual<T1, T2> = T1 extends T2
  ? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2
    ? true
    : false
  : false

export type AnyIsEqual<T1, T2> = T1 extends T2
  ? IsEqual<T1, T2> extends true
    ? true
    : never
  : never

export type PathImpl<K extends string | number, V, TraversedTypes> = V extends
  | Primitive
  | BrowserNativeObject
  ? `${K}`
  : true extends AnyIsEqual<TraversedTypes, V>
  ? `${K}`
  : `${K}` | `${K}.${PathInternal<V, TraversedTypes | V>}`

export type IsTuple<T extends ReadonlyArray<any>> = number extends T['length']
  ? false
  : true

export type ArrayKey = number

export type TupleKeys<T extends ReadonlyArray<any>> = Exclude<
  keyof T,
  keyof any[]
>

export type PathInternal<T, TraversedTypes = T> = T extends ReadonlyArray<
  infer V
>
  ? IsTuple<T> extends true
    ? {
        [K in TupleKeys<T>]-?: PathImpl<K & string, T[K], TraversedTypes>
      }[TupleKeys<T>]
    : PathImpl<ArrayKey, V, TraversedTypes>
  : {
      [K in keyof T]-?: PathImpl<K & string, T[K], TraversedTypes>
    }[keyof T]

export type FieldValues = Record<string, any>

export type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>

export type Path<T> = T extends any ? PathInternal<T> : never

export type FieldPathValue<
  TFieldValues extends FieldValues,
  TFieldPath extends FieldPath<TFieldValues>,
> = PathValue<TFieldValues, TFieldPath>

export type ArrayPath<T> = T extends any ? ArrayPathInternal<T> : never

export type ArrayPathInternal<T, TraversedTypes = T> = T extends ReadonlyArray<
  infer V
>
  ? IsTuple<T> extends true
    ? {
        [K in TupleKeys<T>]-?: ArrayPathImpl<K & string, T[K], TraversedTypes>
      }[TupleKeys<T>]
    : ArrayPathImpl<ArrayKey, V, TraversedTypes>
  : {
      [K in keyof T]-?: ArrayPathImpl<K & string, T[K], TraversedTypes>
    }[keyof T]

export type ArrayPathImpl<
  K extends string | number,
  V,
  TraversedTypes,
> = V extends Primitive | BrowserNativeObject
  ? IsAny<V> extends true
    ? string
    : never
  : V extends ReadonlyArray<infer U>
  ? U extends Primitive | BrowserNativeObject
    ? IsAny<V> extends true
      ? string
      : never
    : true extends AnyIsEqual<TraversedTypes, V>
    ? never
    : `${K}` | `${K}.${ArrayPathInternal<V, TraversedTypes | V>}`
  : true extends AnyIsEqual<TraversedTypes, V>
  ? never
  : `${K}.${ArrayPathInternal<V, TraversedTypes | V>}`

export type IsAny<T> = 0 extends 1 & T ? true : false

export type PathValue<T, P extends Path<T> | ArrayPath<T>> = T extends any
  ? P extends `${infer K}.${infer R}`
    ? K extends keyof T
      ? R extends Path<T[K]>
        ? PathValue<T[K], R>
        : never
      : K extends `${ArrayKey}`
      ? T extends ReadonlyArray<infer V>
        ? PathValue<V, R & Path<V>>
        : never
      : never
    : P extends keyof T
    ? T[P]
    : P extends `${ArrayKey}`
    ? T extends ReadonlyArray<infer V>
      ? V
      : never
    : never
  : never

cassus · 2023-10-07T07:53:18Z

I used this to support namespaced keys

type NamespacedTranslationKeys = {
  [Namespace in keyof TranslationsKeys]: `${Namespace}:${TranslationsKeys[Namespace]}`
}[keyof TranslationsKeys]

Entire code: https://gist.github.com/cassus/cb28122d20f61d3be9c7e09d23033be9

ajmnz mentioned this issue Dec 9, 2021

A rough guide to implementing full-stack i18n duxcore/duxcore#50

Open

ajmnz mentioned this issue Jan 1, 2022

LocaleKeys Generator #747

Closed

cassus mentioned this issue Jan 3, 2023

Typesafe Translation keys #959

Closed

aralroca self-assigned this Mar 5, 2023

aralroca added the enhancement New feature or request label Mar 5, 2023

This was referenced Jul 17, 2023

feat: add Paths type for type safety #1108

Merged

docs: enable type-safety consuming translations #1109

Merged

Curetix mentioned this issue Aug 2, 2023

docs: add missing type to type-safe translations example #1125

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there a way to have the translationKey strongly typed? #721

Is there a way to have the translationKey strongly typed? #721

opolo commented Nov 5, 2021

ajmnz commented Nov 11, 2021

osdiab commented Nov 12, 2021 •

edited

Loading

osdiab commented Nov 12, 2021

osdiab commented Nov 12, 2021

ChristoRibeiro commented Feb 25, 2022

osdiab commented Feb 26, 2022 •

edited

Loading

elementrics commented May 29, 2022 •

edited

Loading

kuus commented Jun 30, 2022 •

edited

Loading

quyctd commented Sep 25, 2022

quyctd commented Oct 5, 2022

elementrics commented Oct 5, 2022

quyctd commented Oct 6, 2022 •

edited

Loading

mleister97 commented Oct 11, 2022

osdiab commented Oct 12, 2022 via email

luixo commented Mar 4, 2023

aralroca commented Mar 5, 2023

boredland commented May 5, 2023

X7Becka commented May 10, 2023 •

edited

Loading

aralroca commented May 10, 2023

eddyhdzg-solarx commented Jun 17, 2023

aralroca commented Jul 15, 2023 •

edited

Loading

osdiab commented Jul 16, 2023 via email

aralroca commented Jul 16, 2023 •

edited

Loading

aralroca commented Jul 17, 2023

sandrooco commented Jul 27, 2023 •

edited

Loading

aralroca commented Jul 27, 2023 •

edited

Loading

valerioleo commented Jul 28, 2023

aralroca commented Jul 28, 2023 •

edited

Loading

SutuSebastian commented Sep 8, 2023

SutuSebastian commented Sep 8, 2023

abuu-u commented Sep 8, 2023

cassus commented Oct 7, 2023

Is there a way to have the translationKey strongly typed? #721

Is there a way to have the translationKey strongly typed? #721

Comments

opolo commented Nov 5, 2021

ajmnz commented Nov 11, 2021

osdiab commented Nov 12, 2021 • edited Loading

osdiab commented Nov 12, 2021

osdiab commented Nov 12, 2021

ChristoRibeiro commented Feb 25, 2022

osdiab commented Feb 26, 2022 • edited Loading

elementrics commented May 29, 2022 • edited Loading

kuus commented Jun 30, 2022 • edited Loading

quyctd commented Sep 25, 2022

quyctd commented Oct 5, 2022

elementrics commented Oct 5, 2022

quyctd commented Oct 6, 2022 • edited Loading

mleister97 commented Oct 11, 2022

osdiab commented Oct 12, 2022 via email

luixo commented Mar 4, 2023

aralroca commented Mar 5, 2023

boredland commented May 5, 2023

X7Becka commented May 10, 2023 • edited Loading

aralroca commented May 10, 2023

eddyhdzg-solarx commented Jun 17, 2023

aralroca commented Jul 15, 2023 • edited Loading

osdiab commented Jul 16, 2023 via email

aralroca commented Jul 16, 2023 • edited Loading

aralroca commented Jul 17, 2023

sandrooco commented Jul 27, 2023 • edited Loading

aralroca commented Jul 27, 2023 • edited Loading

valerioleo commented Jul 28, 2023

aralroca commented Jul 28, 2023 • edited Loading

SutuSebastian commented Sep 8, 2023

Example

SutuSebastian commented Sep 8, 2023

abuu-u commented Sep 8, 2023

cassus commented Oct 7, 2023

osdiab commented Nov 12, 2021 •

edited

Loading

osdiab commented Feb 26, 2022 •

edited

Loading

elementrics commented May 29, 2022 •

edited

Loading

kuus commented Jun 30, 2022 •

edited

Loading

quyctd commented Oct 6, 2022 •

edited

Loading

X7Becka commented May 10, 2023 •

edited

Loading

aralroca commented Jul 15, 2023 •

edited

Loading

aralroca commented Jul 16, 2023 •

edited

Loading

sandrooco commented Jul 27, 2023 •

edited

Loading

aralroca commented Jul 27, 2023 •

edited

Loading

aralroca commented Jul 28, 2023 •

edited

Loading