⚡ improvement(types): typed autocomplete in date and number format op…

…tions (#485) by @Raiondesu * ⚡improvement(types): typed autocomplete in date and number format options Replace Number and Date format options with standard TS `Intl` types, while also adding guiding TS autocomplete to them. This change exterminates the confusion of which types to follow, while preserving backwards-compatibility for types and adding optional autocomplete. * ⚡improvement(types/test): add type constraints to format options It's useful to check static variables types whenever possible.
kazupon · Dec 17, 2018 · e2e5993 · e2e5993
1 parent ef4b1a6
commit e2e5993
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 30 deletions.
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -10,39 +10,55 @@ declare namespace VueI18n {
   interface LocaleMessageArray { [index: number]: LocaleMessage; }
   interface LocaleMessages { [key: string]: LocaleMessageObject; }
   type TranslateResult = string | LocaleMessages;
-  interface DateTimeFormatOptions {
-    year?: string;
-    month?: string;
-    day?: string;
-    hour?: string;
-    minute?: string;
-    second?: string;
-    weekday?: string;
-    hour12?: boolean;
-    era?: string;
-    timeZone?: string;
-    timeZoneName?: string;
-    localeMatcher?: string;
-    formatMatcher?: string;
+
+  type LocaleMatcher = 'lookup' | 'best-fit';
+  type FormatMatcher = 'basic' | 'best-fit';
+
+  type DateTimeHumanReadable = 'long' | 'short' | 'narrow';
+  type DateTimeDigital = 'numeric' | '2-digit';
+
+  interface SpecificDateTimeFormatOptions extends Intl.DateTimeFormatOptions {
+    year?: DateTimeDigital;
+    month?: DateTimeDigital | DateTimeHumanReadable;
+    day?: DateTimeDigital;
+    hour?: DateTimeDigital;
+    minute?: DateTimeDigital;
+    second?: DateTimeDigital;
+    weekday?: DateTimeHumanReadable;
+    era?: DateTimeHumanReadable;
+    timeZoneName?: 'long' | 'short';
+    localeMatcher?: LocaleMatcher;
+    formatMatcher?: FormatMatcher;
   }
+
+  type DateTimeFormatOptions = Intl.DateTimeFormatOptions | SpecificDateTimeFormatOptions;
+
   interface DateTimeFormat { [key: string]: DateTimeFormatOptions; }
-  interface DateTimeFormats { [key: string]: DateTimeFormat; }
+  interface DateTimeFormats { [locale: string]: DateTimeFormat; }
   type DateTimeFormatResult = string;
-  interface NumberFormatOptions {
-    style?: string;
+
+  type CurrencyDisplay = 'symbol' | 'code' | 'name';
+
+  interface SpecificNumberFormatOptions extends Intl.NumberFormatOptions {
+    style?: 'decimal' | 'percent';
     currency?: string;
-    currencyDisplay?: string;
-    useGrouping?: boolean;
-    minimumIntegerDigits?: number;
-    minimumFractionDigits?: number;
-    maximumFractionDigits?: number;
-    minimumSignificantDigits?: number;
-    maximumSignificantDigits?: number;
-    localeMatcher?: string;
-    formatMatcher?: string;
+    currencyDisplay?: CurrencyDisplay;
+    localeMatcher?: LocaleMatcher;
+    formatMatcher?: FormatMatcher;
   }
+
+  interface CurrencyNumberFormatOptions extends Intl.NumberFormatOptions {
+    style: 'currency';
+    currency: string; // Obligatory if style is 'currency'
+    currencyDisplay?: CurrencyDisplay;
+    localeMatcher?: LocaleMatcher;
+    formatMatcher?: FormatMatcher;
+  }
+
+  type NumberFormatOptions = Intl.NumberFormatOptions | SpecificNumberFormatOptions | CurrencyNumberFormatOptions;
+
   interface NumberFormat { [key: string]: NumberFormatOptions; }
-  interface NumberFormats { [key: string]: NumberFormat; }
+  interface NumberFormats { [locale: string]: NumberFormat; }
   type NumberFormatResult = string;
   type PluralizationRulesMap = {
     /**

diff --git a/types/test/index.ts b/types/test/index.ts
@@ -1,5 +1,5 @@
 import Vue, { ComponentOptions } from 'vue';
-import VueI18n from "../index";
+import VueI18n, { DateTimeFormatOptions, NumberFormatOptions } from "../index";
 
 /*
 import * as VueI18n from 'vue-i18n';
@@ -27,11 +27,11 @@ VueI18n.availabilities;             // $ExpectType IntlAvailability
 const locale = 'locale';
 const key = 'key';
 const value = 'value';
-const dateTimeFormatOptions = {
+const dateTimeFormatOptions: DateTimeFormatOptions = {
   year: '2-digit',
   timeZone: 'Asia/Tokyo'
 };
-const numberFormatOptions = {
+const numberFormatOptions: NumberFormatOptions = {
   style: 'currency',
   currency: 'JPY'
 };