fix: Make the type fallback to string

amannn · Sep 18, 2024 · 4c12355 · 4c12355
1 parent 7ab9a72
commit 4c12355
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/examples/example-app-router/src/i18n/request.ts b/examples/example-app-router/src/i18n/request.ts
@@ -1,7 +1,7 @@
 import {notFound} from 'next/navigation';
+import {Formats} from 'next-intl';
 import {getRequestConfig} from 'next-intl/server';
 import {routing} from './routing';
-import { Formats } from 'next-intl';
 
 export const formats = {
   dateTime: {
@@ -22,8 +22,7 @@ export const formats = {
       type: 'conjunction'
     }
   }
-} as const satisfies Partial<Formats>
-
+} as const satisfies Partial<Formats>;
 
 export default getRequestConfig(async ({locale}) => {
   // Validate that the incoming `locale` parameter is valid
@@ -37,5 +36,5 @@ export default getRequestConfig(async ({locale}) => {
         : import(`../../messages/${locale}.json`))
     ).default,
     formats
-  }
+  };
 });
diff --git a/packages/use-intl/src/core/createFormatter.tsx b/packages/use-intl/src/core/createFormatter.tsx
@@ -163,7 +163,11 @@ export default function createFormatter({
     value: Date | number,
     /** If a time zone is supplied, the `value` is converted to that time zone.
      * Otherwise the user time zone will be used. */
-    formatOrOptions?: keyof IntlFormats['dateTime'] | DateTimeFormatOptions
+    formatOrOptions?:
+      | (keyof IntlFormats['dateTime'] extends string
+          ? IntlFormats['dateTime']
+          : string)
+      | DateTimeFormatOptions
   ) {
     return getFormattedValue(
       formatOrOptions,
@@ -183,7 +187,11 @@ export default function createFormatter({
     end: Date | number,
     /** If a time zone is supplied, the values are converted to that time zone.
      * Otherwise the user time zone will be used. */
-    formatOrOptions?: keyof IntlFormats['dateTime'] | DateTimeFormatOptions
+    formatOrOptions?:
+      | (keyof IntlFormats['dateTime'] extends string
+          ? IntlFormats['dateTime']
+          : string)
+      | DateTimeFormatOptions
   ) {
     return getFormattedValue(
       formatOrOptions,
@@ -200,7 +208,11 @@ export default function createFormatter({
 
   function number(
     value: number | bigint,
-    formatOrOptions?: keyof IntlFormats['number'] | NumberFormatOptions
+    formatOrOptions?:
+      | (keyof IntlFormats['number'] extends string
+          ? IntlFormats['number']
+          : string)
+      | NumberFormatOptions
   ) {
     return getFormattedValue(
       formatOrOptions,
@@ -284,7 +296,11 @@ export default function createFormatter({
   type FormattableListValue = string | ReactElement;
   function list<Value extends FormattableListValue>(
     value: Iterable<Value>,
-    formatOrOptions?: IntlFormats['list'] | Intl.ListFormatOptions
+    formatOrOptions?:
+      | (keyof IntlFormats['list'] extends string
+          ? IntlFormats['list']
+          : string)
+      | Intl.ListFormatOptions
   ): Value extends string ? string : Iterable<ReactElement> {
     const serializedValue: Array<string> = [];
     const richValues = new Map<string, Value>();

diff --git a/packages/use-intl/src/react/useFormatter.test.tsx b/packages/use-intl/src/react/useFormatter.test.tsx
@@ -67,7 +67,6 @@ describe('dateTime', () => {
   it('can use a global date format', () => {
     function Component() {
       const format = useFormatter();
-      // @ts-expect-error
       return <>{format.dateTime(mockDate, 'onlyYear')}</>;
     }
 
@@ -83,7 +82,6 @@ describe('dateTime', () => {
   it('can use a global time format', () => {
     function Component() {
       const format = useFormatter();
-      // @ts-expect-error
       return <>{format.dateTime(mockDate, 'onlyHours')}</>;
     }
 
@@ -193,7 +191,6 @@ describe('dateTime', () => {
 
       function Component() {
         const format = useFormatter();
-        // @ts-expect-error
         return <>{format.dateTime(mockDate, 'onlyYear')}</>;
       }
 
@@ -221,7 +218,6 @@ describe('dateTime', () => {
 
       function Component() {
         const format = useFormatter();
-        // @ts-expect-error
         return <>{format.dateTime(mockDate, 'medium')}</>;
       }
 
@@ -319,7 +315,6 @@ describe('number', () => {
   it('can use a global format', () => {
     function Component() {
       const format = useFormatter();
-      // @ts-expect-error
       return <>{format.number(10000, 'noGrouping')}</>;
     }
 
@@ -375,7 +370,6 @@ describe('number', () => {
 
       function Component() {
         const format = useFormatter();
-        // @ts-expect-error
         return <>{format.number(mockNumber, 'missing')}</>;
       }
 

diff --git a/packages/use-intl/types/index.d.ts b/packages/use-intl/types/index.d.ts
@@ -5,9 +5,9 @@ declare interface IntlMessages extends Record<string, any> {}
 // This type is intended to be overridden
 // by the consumer for optional type safety of formats
 declare interface IntlFormats {
-  dateTime: {};
-  number: {};
-  list: {};
+  dateTime: any;
+  number: any;
+  list: any;
 }
 
 // Temporarly copied here until the "es2020.intl" lib is published.