fix(typing): n() & d() output depending "part" option

Author: pinguet62

packages/vue-i18n-core/src/composer.ts

@@ -242,6 +242,8 @@ export interface CustomBlock<Message = VueMessageType> {
 
 export type CustomBlocks<Message = VueMessageType> = Array<CustomBlock<Message>>
 
+type IsPart<O> = O extends { part: infer P } ? P : false
+
 // prettier-ignore
 /**
  * Composer Options
@@ -1114,16 +1116,17 @@ export interface ComposerDateTimeFormatting<
   <
     Value extends number | Date | string = number,
     Key extends string = string,
-    Return extends string | Intl.DateTimeFormatPart[] =
-      | string
-      | Intl.DateTimeFormatPart[]
-  >(
-    value: Value,
-    keyOrOptions:
+    OptionsType extends
+      | Key
+      | ResourceKeys
+      | DateTimeOptions<Key | ResourceKeys, Locales> =
       | Key
       | ResourceKeys
       | DateTimeOptions<Key | ResourceKeys, Locales>
-  ): Return
+  >(
+    value: Value,
+    keyOrOptions: OptionsType
+  ): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string
   /**
    * Datetime formatting
    *
@@ -1141,17 +1144,18 @@ export interface ComposerDateTimeFormatting<
   <
     Value extends number | Date | string = number,
     Key extends string = string,
-    Return extends string | Intl.DateTimeFormatPart[] =
-      | string
-      | Intl.DateTimeFormatPart[]
-  >(
-    value: Value,
-    keyOrOptions:
+    OptionsType extends
+      | Key
+      | ResourceKeys
+      | DateTimeOptions<Key | ResourceKeys, Locales> =
       | Key
       | ResourceKeys
-      | DateTimeOptions<Key | ResourceKeys, Locales>,
+      | DateTimeOptions<Key | ResourceKeys, Locales>
+  >(
+    value: Value,
+    keyOrOptions: OptionsType,
     locale: Locales
-  ): Return
+  ): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string
 }
 
 /**
@@ -1215,16 +1219,17 @@ export interface ComposerNumberFormatting<
    */
   <
     Key extends string = string,
-    Return extends string | Intl.NumberFormatPart[] =
-      | string
-      | Intl.NumberFormatPart[]
-  >(
-    value: number,
-    keyOrOptions:
+    OptionsType extends
+      | Key
+      | ResourceKeys
+      | NumberOptions<Key | ResourceKeys, Locales> =
       | Key
       | ResourceKeys
       | NumberOptions<Key | ResourceKeys, Locales>
-  ): Return
+  >(
+    value: number,
+    keyOrOptions: OptionsType
+  ): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string
   /**
    * Number Formatting
    *
@@ -1241,17 +1246,18 @@ export interface ComposerNumberFormatting<
    */
   <
     Key extends string = string,
-    Return extends string | Intl.NumberFormatPart[] =
-      | string
-      | Intl.NumberFormatPart[]
-  >(
-    value: number,
-    keyOrOptions:
+    OptionsType extends
+      | Key
+      | ResourceKeys
+      | NumberOptions<Key | ResourceKeys, Locales> =
       | Key
       | ResourceKeys
-      | NumberOptions<Key | ResourceKeys, Locales>,
+      | NumberOptions<Key | ResourceKeys, Locales>
+  >(
+    value: number,
+    keyOrOptions: OptionsType,
     locale: Locales
-  ): Return
+  ): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string
 }
 
 /**

packages/vue-i18n-core/test/composer.test-d.ts

@@ -342,49 +342,81 @@ test('strict composer with direct options', () => {
   expectTypeOf(strictDirectComposer.numberFormats.value).toEqualTypeOf<{
     ca: { currency: { style: 'currency'; currencyDisplay: 'symbol' } }
   }>()
+
+  // ComposerDateTimeFormatting
   expectTypeOf(strictDirectComposer.d(new Date())).toEqualTypeOf<string>()
   expectTypeOf(
-    strictDirectComposer.d<Date, string, string>(new Date(), 'short', 'ja-JP')
+    strictDirectComposer.d<Date, string>(new Date(), 'short', 'ja-JP')
   ).toEqualTypeOf<string>()
   expectTypeOf(
     strictDirectComposer.d(new Date(), { key: 'short', locale: 'zh' })
-  ).toEqualTypeOf<string | Intl.DateTimeFormatPart[]>()
+  ).toEqualTypeOf<string>()
   expectTypeOf(
-    strictDirectComposer.d<Date, string, Intl.DateTimeFormatPart[]>(
-      new Date(),
-      {
-        key: 'short',
-        locale: 'zh',
-        part: true
-      }
-    )
-  ).toEqualTypeOf<Intl.DateTimeFormatPart[]>()
+    strictDirectComposer.d<Date, string>(new Date(), 'custom' as any)
+  ).toEqualTypeOf<string>()
+  // part & return type
   expectTypeOf(
-    strictDirectComposer.d<Date, string, string>(new Date(), 'custom' as any)
+    strictDirectComposer.d(new Date(), {
+      key: 'short',
+      locale: 'zh'
+      //part: undefined
+    })
+  ).toEqualTypeOf<string>()
+  expectTypeOf(
+    strictDirectComposer.d(new Date(), {
+      key: 'short',
+      locale: 'zh',
+      part: false
+    })
   ).toEqualTypeOf<string>()
+  expectTypeOf(
+    strictDirectComposer.d(new Date(), {
+      key: 'short',
+      locale: 'zh',
+      part: true
+    })
+  ).toEqualTypeOf<Intl.DateTimeFormatPart[]>()
+  expectTypeOf(
+    strictDirectComposer.d<Date, string>(new Date(), {
+      key: 'short',
+      locale: 'zh',
+      part: true
+    })
+  ).toEqualTypeOf<Intl.DateTimeFormatPart[]>()
+
+  // ComposerNumberFormatting
   expectTypeOf(strictDirectComposer.n(1)).toEqualTypeOf<string>()
-  expectTypeOf(strictDirectComposer.n(1, 'currency', 'zh')).toEqualTypeOf<
-    string | Intl.NumberFormatPart[]
-  >()
   expectTypeOf(
-    strictDirectComposer.n<string, string>(1, 'currency', 'zh')
+    strictDirectComposer.n(1, 'currency', 'zh')
+  ).toEqualTypeOf<string>()
+  expectTypeOf(
+    strictDirectComposer.n<string>(1, 'currency', 'zh')
+  ).toEqualTypeOf<string>()
+  expectTypeOf(strictDirectComposer.n(1, 'currency')).toEqualTypeOf<string>()
+  expectTypeOf(
+    strictDirectComposer.n<string>(1, 'currency')
+  ).toEqualTypeOf<string>()
+  // part & return type
+  expectTypeOf(
+    strictDirectComposer.n(1, {
+      key: 'currency',
+      locale: 'en'
+      //part: undefined
+    })
+  ).toEqualTypeOf<string>()
+  expectTypeOf(
+    strictDirectComposer.n(1, { key: 'currency', locale: 'en', part: false })
   ).toEqualTypeOf<string>()
   expectTypeOf(
     strictDirectComposer.n(1, { key: 'currency', locale: 'en', part: true })
-  ).toEqualTypeOf<string | Intl.NumberFormatPart[]>()
+  ).toEqualTypeOf<Intl.NumberFormatPart[]>()
   expectTypeOf(
-    strictDirectComposer.n<string, Intl.NumberFormatPart[]>(1, {
+    strictDirectComposer.n<string>(1, {
       key: 'currency',
       locale: 'en',
       part: true
     })
   ).toEqualTypeOf<Intl.NumberFormatPart[]>()
-  expectTypeOf(strictDirectComposer.n(1, 'currency')).toEqualTypeOf<
-    string | Intl.NumberFormatPart[]
-  >()
-  expectTypeOf(
-    strictDirectComposer.n<string, string>(1, 'currency')
-  ).toEqualTypeOf<string>()
 
   // const noOptionsComposer = createComposer({ missingWarn: true })
   const noOptionsComposer = createComposer({ locale: 'en' })

packages/vue-i18n/src/vue.d.ts

@@ -26,6 +26,8 @@ import type {
 
 import type { JsonPaths } from '@intlify/core-base'
 
+type IsPart<O> = O extends { part: infer P } ? P : false
+
 declare module 'vue' {
   /**
    * Component Custom Options for Vue I18n
@@ -602,9 +604,7 @@ declare module 'vue' {
     $d<
       Value extends number | Date = number,
       Key extends string = string,
-      Return extends string | Intl.DateTimeFormatPart[] =
-        | string
-        | Intl.DateTimeFormatPart[],
+      OptionsType = DateTimeOptions<Key | ResourceKeys>,
       DefinedDateTimeFormat extends
         RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>,
       Keys = IsEmptyObject<DefinedDateTimeFormat> extends false
@@ -615,9 +615,9 @@ declare module 'vue' {
       ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
     >(
       value: Value,
-      options: DateTimeOptions<Key | ResourceKeys>,
+      options: OptionsType,
       locale: Locale
-    ): Return
+    ): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string
     /**
      * Number formatting
      *
@@ -670,9 +670,7 @@ declare module 'vue' {
      */
     $n<
       Key extends string = string,
-      Return extends string | Intl.NumberFormatPart[] =
-        | string
-        | Intl.NumberFormatPart[],
+      OptionsType = NumberOptions<Key | ResourceKeys>,
       DefinedNumberFormat extends
         RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>,
       Keys = IsEmptyObject<DefinedNumberFormat> extends false
@@ -683,8 +681,8 @@ declare module 'vue' {
       ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
     >(
       value: number,
-      options: NumberOptions<Key | ResourceKeys>
-    ): Return
+      options: OptionsType
+    ): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string
     /**
      * Number formatting
      *
@@ -726,9 +724,7 @@ declare module 'vue' {
      */
     $n<
       Key extends string = string,
-      Return extends string | Intl.NumberFormatPart[] =
-        | string
-        | Intl.NumberFormatPart[],
+      OptionsType = NumberOptions<Key | ResourceKeys>,
       DefinedNumberFormat extends
         RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>,
       Keys = IsEmptyObject<DefinedNumberFormat> extends false
@@ -739,9 +735,9 @@ declare module 'vue' {
       ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
     >(
       value: number,
-      options: NumberOptions<Key | ResourceKeys>,
+      options: OptionsType,
       locale: Locale
-    ): Return
+    ): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string
 
     /**
      * Locale messages getter