-
{t('count', {count})}
+
{t('count', {count: String(count)})}
diff --git a/packages/use-intl/src/core/TranslationValues.tsx b/packages/use-intl/src/core/TranslationValues.tsx
index 43e9bd1f7..063d3374e 100644
--- a/packages/use-intl/src/core/TranslationValues.tsx
+++ b/packages/use-intl/src/core/TranslationValues.tsx
@@ -1,9 +1,12 @@
import type {ReactNode} from 'react';
-export type ICUArg = string | number | boolean | Date;
-// ^ Keep this in sync with `ICUArgument` in `createTranslator.tsx`
-
-export type TranslationValues = Record
;
+export type TranslationValues = Record<
+ string,
+ // All params that are allowed for basic params as well as operators like
+ // `plural`, `select`, `number` and `date`. Note that `Date` is not supported
+ // for plain params, but this requires type information from the ICU parser.
+ string | number | Date
+>;
export type RichTagsFunction = (chunks: ReactNode) => ReactNode;
export type MarkupTagsFunction = (chunks: string) => string;
@@ -11,9 +14,12 @@ export type MarkupTagsFunction = (chunks: string) => string;
// We could consider renaming this to `ReactRichTranslationValues` and defining
// it in the `react` namespace if the core becomes useful to other frameworks.
// It would be a breaking change though, so let's wait for now.
-export type RichTranslationValues = Record;
+export type RichTranslationValues = Record<
+ string,
+ TranslationValues[string] | RichTagsFunction
+>;
export type MarkupTranslationValues = Record<
string,
- ICUArg | MarkupTagsFunction
+ TranslationValues[string] | MarkupTagsFunction
>;
diff --git a/packages/use-intl/src/core/createTranslator.test.tsx b/packages/use-intl/src/core/createTranslator.test.tsx
index 218c1f236..1a4a4c9bd 100644
--- a/packages/use-intl/src/core/createTranslator.test.tsx
+++ b/packages/use-intl/src/core/createTranslator.test.tsx
@@ -9,6 +9,7 @@ import createTranslator from './createTranslator.tsx';
const messages = {
Home: {
title: 'Hello world!',
+ param: 'Hello {param}',
rich: 'Hello {name}!',
markup: 'Hello {name}!'
}
@@ -53,6 +54,21 @@ it('handles formatting errors', () => {
expect(result).toBe('price');
});
+it('restricts boolean and date values as plain params', () => {
+ const onError = vi.fn();
+ const t = createTranslator({
+ locale: 'en',
+ namespace: 'Home',
+ messages: messages as any,
+ onError
+ });
+
+ t('param', {param: new Date()});
+ // @ts-expect-error
+ t('param', {param: true});
+ expect(onError.mock.calls.length).toBe(2);
+});
+
it('supports alphanumeric value names', () => {
const t = createTranslator({
locale: 'en',
@@ -234,6 +250,22 @@ describe('type safety', () => {
};
});
+ it('restricts non-string values', () => {
+ const t = translateMessage('{param}');
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ () => {
+ // @ts-expect-error -- should use {param, number} instead
+ t('msg', {param: 1.5});
+
+ // @ts-expect-error
+ t('msg', {param: new Date()});
+
+ // @ts-expect-error
+ t('msg', {param: true});
+ };
+ });
+
it('can handle undefined values', () => {
const t = translateMessage('Hello {name}');
@@ -266,6 +298,16 @@ describe('type safety', () => {
};
});
+ it('restricts numbers in dates', () => {
+ const t = translateMessage('Date: {date, date, full}');
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ () => {
+ // @ts-expect-error
+ t('msg', {date: 1.5});
+ };
+ });
+
it('validates cardinal plurals', () => {
const t = translateMessage(
'You have {count, plural, =0 {no followers yet} =1 {one follower} other {# followers}}.'
@@ -340,6 +382,28 @@ describe('type safety', () => {
};
});
+ it('restricts numbers in selects', () => {
+ const t = translateMessage(
+ '{count, select, 0 {zero} 1 {one} other {other}}'
+ );
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ () => {
+ // @ts-expect-error
+ t('msg', {count: 1.5});
+ };
+ });
+
+ it('restricts booleans in selects', () => {
+ const t = translateMessage('{bool, select, true {true} false {false}}');
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ () => {
+ // @ts-expect-error
+ t('msg', {bool: true});
+ };
+ });
+
it('validates escaped', () => {
const t = translateMessage(
"Escape curly braces with single quotes (e.g. '{name')"
@@ -404,7 +468,7 @@ describe('type safety', () => {
it('validates a complex message', () => {
const t = translateMessage(
- 'Hello {name}, you have {count, plural, =0 {no followers} =1 {one follower} other {# followers ({count})}}.'
+ 'Hello {name}, you have {count, plural, =0 {no followers} =1 {one follower} other {# followers ({count, number})}}.'
);
t.rich('msg', {
diff --git a/packages/use-intl/src/core/createTranslator.tsx b/packages/use-intl/src/core/createTranslator.tsx
index e535fbf7b..eef02b5da 100644
--- a/packages/use-intl/src/core/createTranslator.tsx
+++ b/packages/use-intl/src/core/createTranslator.tsx
@@ -11,9 +11,9 @@ import type {
NestedValueOf
} from './MessageKeys.tsx';
import type {
- ICUArg,
MarkupTagsFunction,
- RichTagsFunction
+ RichTagsFunction,
+ TranslationValues
} from './TranslationValues.tsx';
import createTranslatorImpl from './createTranslatorImpl.tsx';
import {defaultGetMessageFallback, defaultOnError} from './defaults.tsx';
@@ -31,12 +31,11 @@ type ICUArgsWithTags<
> = ICUArgs<
MessageString,
{
- // Provide types inline instead of an alias so the
- // consumer can see the types instead of the alias
- ICUArgument: string | number | boolean | Date;
- // ^ Keep this in sync with `ICUArg` in `TranslationValues.tsx`
+ // Numbers and dates should use the corresponding operators
+ ICUArgument: string;
+
ICUNumberArgument: number;
- ICUDateArgument: Date | number;
+ ICUDateArgument: Date;
}
> &
([TagsFn] extends [never] ? {} : ICUTags);
@@ -49,7 +48,10 @@ type TranslateArgs<
> =
// If an unknown string is passed, allow any values
string extends Value
- ? [values?: Record, formats?: Formats]
+ ? [
+ values?: Record,
+ formats?: Formats
+ ]
: (
Value extends any
? (key: ICUArgsWithTags) => void
diff --git a/packages/use-intl/src/core/index.tsx b/packages/use-intl/src/core/index.tsx
index 775ab964c..4f5c6e503 100644
--- a/packages/use-intl/src/core/index.tsx
+++ b/packages/use-intl/src/core/index.tsx
@@ -1,7 +1,6 @@
export type {default as AbstractIntlMessages} from './AbstractIntlMessages.tsx';
export type {
TranslationValues,
- ICUArg,
RichTranslationValues,
MarkupTranslationValues,
RichTagsFunction,