Specify type of useLocale

[TommySorensen]

Anyone knows if there is a way to actually have a typesafe locale. Currently its just string but i want it to be my list of locales.

// app/[locale]/layout.ts
export function LocaleLayout({ params }: Params) {

}

interface Params {
  params: { locale: Locale };
}

// Locale types
export enum Locales {
  en = 'en',
  enGb = 'en-GB'
}

export type Locale = (typeof localeConfig)['locales'][number];

[amannn]

Currently only if you wrap the function:

import {useLocale as useUntypedLocale} from 'next-intl';

export default function useLocale() {
  return useUntypedLocale() as 'en' | 'en-GB';
}

I've been thinking about a way to provide this within the library, as with the App Router, we can guarantee that only known locales are returned. For the Pages Router this was not possible with the way the library is integrated.

[TommySorensen]

Great. Thx for helping. This will work for now 🎉

What about making it possible to extend the interface like the IntlMessages example in the typescript section in the docs? That will only fix the types, but not the checking for known locales.

[amannn]

That would be an option, yes. In #426 I'm working on localized pathnames by using a factory function, that'd be another option to return a typed useLocale hook. I need to give it a bit more thought, also considering other APIs so that we have a cohesive story.

[stefanprobst]

maybe something similar to what vue-i18n does could work? see: intlify/vue-i18n#1890