fix: improvement n and $n typings (#2174)

* fix: improvement `n` and `$n` typings

* fix

Author: kazupon

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

@@ -1201,13 +1201,18 @@ export interface ComposerNumberFormatting<
    *
    * @returns Formatted value
    */
-  <Key extends string = string>(
+  <
+    Key extends string = string,
+    Return extends string | Intl.NumberFormatPart[] =
+      | string
+      | Intl.NumberFormatPart[]
+  >(
     value: number,
     keyOrOptions:
       | Key
       | ResourceKeys
       | NumberOptions<Key | ResourceKeys, Locales>
-  ): string | Intl.NumberFormatPart[]
+  ): Return
   /**
    * Number Formatting
    *
@@ -1222,14 +1227,19 @@ export interface ComposerNumberFormatting<
    *
    * @returns Formatted value
    */
-  <Key extends string = string>(
+  <
+    Key extends string = string,
+    Return extends string | Intl.NumberFormatPart[] =
+      | string
+      | Intl.NumberFormatPart[]
+  >(
     value: number,
     keyOrOptions:
       | Key
       | ResourceKeys
       | NumberOptions<Key | ResourceKeys, Locales>,
     locale: Locales
-  ): string | Intl.NumberFormatPart[]
+  ): Return
 }
 
 /**

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

@@ -357,11 +357,24 @@ test('strict composer with direct options', () => {
     string | Intl.NumberFormatPart[]
   >()
   expectTypeOf(
-    strictDirectComposer.n(1, { key: 'currency', locale: 'en' })
+    strictDirectComposer.n<string, string>(1, 'currency', 'zh')
+  ).toEqualTypeOf<string>()
+  expectTypeOf(
+    strictDirectComposer.n(1, { key: 'currency', locale: 'en', part: true })
   ).toEqualTypeOf<string | Intl.NumberFormatPart[]>()
-  expectTypeOf(strictDirectComposer.n(1, 'custom' as any)).toEqualTypeOf<
+  expectTypeOf(
+    strictDirectComposer.n<string, Intl.NumberFormatPart[]>(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

@@ -17,7 +17,6 @@ import type {
   DefineDateTimeFormat,
   DefineLocaleMessage,
   NumberFormat,
-  NumberFormatResult,
   RemovedIndexResources,
   TranslateResult,
   Translation,
@@ -668,7 +667,7 @@ declare module 'vue' {
      *
      * @returns formatted value
      */
-    $n(value: number): NumberFormatResult
+    $n(value: number): string
     /**
      * Number formatting
      *
@@ -693,21 +692,23 @@ declare module 'vue' {
     >(
       value: number,
       key: Key | ResourceKeys
-    ): NumberFormatResult
+    ): string
     /**
      * Number formatting
      *
      * @remarks
      * Overloaded `$n`. About details, see the {@link $n} remarks.
      *
      * @param value - A number value
-     * @param key - A key of number formats
-     * @param locale - A locale, optional, override locale that global scope or local scope
+     * @param options - An options, see the {@link NumberOptions}
      *
      * @returns formatted value
      */
     $n<
       Key extends string = string,
+      Return extends string | Intl.NumberFormatPart[] =
+        | string
+        | Intl.NumberFormatPart[],
       DefinedNumberFormat extends
         RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>,
       Keys = IsEmptyObject<DefinedNumberFormat> extends false
@@ -718,41 +719,8 @@ declare module 'vue' {
       ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
     >(
       value: number,
-      key: Key | ResourceKeys,
-      locale: Locale
-    ): NumberFormatResult
-    /**
-     * Number formatting
-     *
-     * @remarks
-     * Overloaded `$n`. About details, see the {@link $n} remarks.
-     *
-     * @param value - A number value
-     * @param args - An argument values
-     *
-     * @returns formatted value
-     */
-    $n(
-      value: number,
-      args: { [key: string]: string | boolean | number }
-    ): NumberFormatResult
-    /**
-     * Number formatting
-     *
-     * @remarks
-     * Overloaded `$n`. About details, see the {@link $n} remarks.
-     *
-     * @param value - A number value
-     * @param key - A key of number formats
-     * @param args - An argument values
-     *
-     * @returns formatted value
-     */
-    $n(
-      value: number,
-      key: string,
-      args: { [key: string]: string | boolean | number }
-    ): NumberFormatResult
+      options: NumberOptions<Key, ResourceKeys>
+    ): Return
     /**
      * Number formatting
      *
@@ -762,35 +730,6 @@ declare module 'vue' {
      * @param value - A number value
      * @param key - A key of number formats
      * @param locale - A locale, optional, override locale that global scope or local scope
-     * @param args - An argument values
-     *
-     * @returns formatted value
-     */
-    $n(
-      value: number,
-      key: string,
-      locale: Locale,
-      args: { [key: string]: string | boolean | number }
-    ): NumberFormatResult
-    /**
-     * Number formatting
-     *
-     * @remarks
-     * Overloaded `$n`. About details, see the {@link $n} remarks.
-     *
-     * @param value - A number value
-     *
-     * @returns formatted value
-     */
-    $n(value: number): string
-    /**
-     * Number formatting
-     *
-     * @remarks
-     * Overloaded `$n`. About details, see the {@link $n} remarks.
-     *
-     * @param value - A number value
-     * @param key - A key of number formats
      *
      * @returns formatted value
      */
@@ -806,7 +745,8 @@ declare module 'vue' {
       ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
     >(
       value: number,
-      key: Key | ResourceKeys
+      key: Key | ResourceKeys,
+      locale: Locale
     ): string
     /**
      * Number formatting
@@ -815,13 +755,16 @@ declare module 'vue' {
      * Overloaded `$n`. About details, see the {@link $n} remarks.
      *
      * @param value - A number value
-     * @param key - A key of number formats
+     * @param options - An options, see the {@link NumberOptions}
      * @param locale - A locale, optional, override locale that global scope or local scope
      *
      * @returns formatted value
      */
     $n<
       Key extends string = string,
+      Return extends string | Intl.NumberFormatPart[] =
+        | string
+        | Intl.NumberFormatPart[],
       DefinedNumberFormat extends
         RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>,
       Keys = IsEmptyObject<DefinedNumberFormat> extends false
@@ -832,24 +775,10 @@ declare module 'vue' {
       ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
     >(
       value: number,
-      key: Key | ResourceKeys,
+      options: NumberOptions<Key, ResourceKeys>,
       locale: Locale
-    ): string
-    /**
-     * Number formatting
-     *
-     * @remarks
-     * Overloaded `$n`. About details, see the {@link $n} remarks.
-     *
-     * @param value - A number value
-     * @param options - An options, see the {@link NumberOptions}
-     *
-     * @returns formatted value
-     */
-    $n<OptionsType extends NumberOptions>(
-      value: number,
-      options: OptionsType
-    ): OptionsType['part'] extends true ? Intl.NumberFormatPart[] : string
+    ): Return
+
     /**
      * Locale messages getter
      *