fix: Disallow string dates, improve autocomplete (#1557)

Author: amannn

packages/use-intl/src/core/TranslationValues.tsx

@@ -1,9 +1,7 @@
 import type {ReactNode} from 'react';
 
-// These type names are shown to consumers in autocomplete
 export type ICUArg = string | number | boolean | Date;
-export type ICUNumber = number;
-export type ICUDate = Date | number | string;
+// ^ Keep this in sync with `ICUArgument` in `createTranslator.tsx`
 
 export type TranslationValues = Record<string, ICUArg>;
 

packages/use-intl/src/core/createTranslator.test.tsx

@@ -244,6 +244,28 @@ describe('type safety', () => {
       t('msg', obj);
     });
 
+    it('validates numbers', () => {
+      const t = translateMessage('Percentage: {value, number, percent}');
+      t('msg', {value: 1.5});
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      () => {
+        // @ts-expect-error
+        t('msg', {value: 'test'});
+      };
+    });
+
+    it('validates dates', () => {
+      const t = translateMessage('Date: {date, date, full}');
+      t('msg', {date: new Date('2024-07-09T07:06:03.320Z')});
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      () => {
+        // @ts-expect-error
+        t('msg', {date: '2024-07-09T07:06:03.320Z'});
+      };
+    });
+
     it('validates cardinal plurals', () => {
       const t = translateMessage(
         'You have {count, plural, =0 {no followers yet} =1 {one follower} other {# followers}}.'

packages/use-intl/src/core/createTranslator.tsx

@@ -12,8 +12,6 @@ import type {
 } from './MessageKeys.tsx';
 import type {
   ICUArg,
-  ICUDate,
-  ICUNumber,
   MarkupTagsFunction,
   RichTagsFunction
 } from './TranslationValues.tsx';
@@ -33,9 +31,12 @@ type ICUArgsWithTags<
 > = ICUArgs<
   MessageString,
   {
-    ICUArgument: ICUArg;
-    ICUNumberArgument: ICUNumber;
-    ICUDateArgument: ICUDate;
+    // 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`
+    ICUNumberArgument: number;
+    ICUDateArgument: Date | number;
   }
 > &
   ([TagsFn] extends [never] ? {} : ICUTags<MessageString, TagsFn>);

packages/use-intl/src/core/index.tsx

@@ -1,11 +1,9 @@
 export type {default as AbstractIntlMessages} from './AbstractIntlMessages.tsx';
 export type {
   TranslationValues,
+  ICUArg,
   RichTranslationValues,
   MarkupTranslationValues,
-  ICUArg,
-  ICUNumber,
-  ICUDate,
   RichTagsFunction,
   MarkupTagsFunction
 } from './TranslationValues.tsx';