Is there a way to add type safety to getMessages/useMessages?

[Demianeen]

Whenever I need to pass the labels to the client I provide individual messages to the NextIntlClientProvider. Like this:

import pick from 'lodash/pick';
import {NextIntlClientProvider, useMessages} from 'next-intl';
import ClientCounter from './ClientCounter';
 
export default function Counter() {
  // Receive messages provided in `i18n/request.ts` …
  const messages = useMessages();
 
  return (
    <NextIntlClientProvider
      messages={
        // … and provide the relevant messages
        pick(messages, 'ClientCounter')
      }
    >
      <ClientCounter />
    </NextIntlClientProvider>
  );
}

But the type error arises, when components are nested in other namespaces. For example:

export async function CampaignsPage({}: CampaignsPageProps) {
	const messages = await getMessages()

	return (
		<NextIntlClientProvider
			messages={{
				...pickZodMessages(messages),
				pages: {
					...pick(messages.pages, ['campaigns']),
				},
				features: {
					...pick(messages.features, ['create-campaign']),
				},
				entities: {
					...pick(messages.entities, ['campaign']),
					...pick(messages.entities, ['company']),
					...pick(messages.entities, ['industry']),
					...pick(messages.entities, ['geography']),
					...pick(messages.entities, ['stage']),
				},
			}}
		>
			...
		</NextIntlClientProvider>
	)
}

Causes 7 typescript errors: Spread types may only be created from object types.

I assume this is because AbstractIntlMessages type:

type AbstractIntlMessages = {
    [id: string]: AbstractIntlMessages | string;
};

I thought that I can extend it similar to IntlMessages but apparently it is a type and not interface, so it is not extendable like this.

I was surprised to find that nobody faced this issue before. Is there some known way around it?

[amannn]

Messages as returned by useMessages() and await getMessages() will be typed in the upcoming next-intl@4! 🙂