From 3e00688f955587ac155c9d6c2fa519b07df17a70 Mon Sep 17 00:00:00 2001 From: Linjie Ding Date: Thu, 17 Sep 2020 01:03:21 -0700 Subject: [PATCH] fix(@formatjs/intl-displaynames): follow ES2021 spec and make type option required (#2103) --- packages/intl-displaynames/index.ts | 8 +- .../intl-displaynames/tests/index.test.ts | 22 ++- packages/intl/src/displayName.ts | 2 +- packages/intl/src/types.ts | 2 +- .../intl/tests/formatDisplayNames.test.ts | 7 +- .../__snapshots__/displayName.tsx.snap | 1 + .../tests/unit/components/displayName.tsx | 2 + translated/es-ES/website/docs/intl.md | 156 ++++++++-------- .../es-ES/website/docs/react-intl/api.md | 172 +++++++++--------- translated/fr-FR/website/docs/intl.md | 156 ++++++++-------- .../fr-FR/website/docs/react-intl/api.md | 172 +++++++++--------- translated/ja-JP/website/docs/intl.md | 156 ++++++++-------- .../ja-JP/website/docs/react-intl/api.md | 172 +++++++++--------- translated/pt-PT/website/docs/intl.md | 156 ++++++++-------- .../pt-PT/website/docs/react-intl/api.md | 172 +++++++++--------- translated/zh-CN/website/docs/intl.md | 156 ++++++++-------- .../zh-CN/website/docs/react-intl/api.md | 172 +++++++++--------- translated/zh-TW/website/docs/intl.md | 156 ++++++++-------- .../zh-TW/website/docs/react-intl/api.md | 172 +++++++++--------- website/docs/intl.md | 2 +- website/docs/react-intl/api.md | 2 +- 21 files changed, 1015 insertions(+), 1001 deletions(-) diff --git a/packages/intl-displaynames/index.ts b/packages/intl-displaynames/index.ts index 74100548fc..236c388771 100644 --- a/packages/intl-displaynames/index.ts +++ b/packages/intl-displaynames/index.ts @@ -17,7 +17,7 @@ import { export interface DisplayNamesOptions { localeMatcher?: 'lookup' | 'best fit'; style?: 'narrow' | 'short' | 'long'; - type?: 'language' | 'region' | 'script' | 'currency'; + type: 'language' | 'region' | 'script' | 'currency'; fallback?: 'code' | 'none'; } @@ -69,8 +69,12 @@ export class DisplayNames { 'type', 'string', ['language', 'currency', 'region', 'script'], - 'language' + undefined ); + if (type === undefined) { + throw TypeError(`Intl.DisplayNames constructor requires "type" option`); + } + setSlot(this, 'type', type); const fallback = GetOption( diff --git a/packages/intl-displaynames/tests/index.test.ts b/packages/intl-displaynames/tests/index.test.ts index 67b955b935..d83ca48a98 100644 --- a/packages/intl-displaynames/tests/index.test.ts +++ b/packages/intl-displaynames/tests/index.test.ts @@ -20,22 +20,26 @@ describe('.of()', () => { }); it('preserves unrecognized region subtag in language code when fallback option is code', () => { - expect(new DisplayNames('zh', {fallback: 'code'}).of('zh-Hans-Xy')).toBe( - '简体中文（XY）' - ); + expect( + new DisplayNames('zh', {type: 'language', fallback: 'code'}).of( + 'zh-Hans-Xy' + ) + ).toBe('简体中文（XY）'); }); describe('with fallback set to "none"', () => { it('returns undefined when called with language code that has unrecognized region subtag', () => { - expect(new DisplayNames('zh', {fallback: 'none'}).of('zh-Hans-XY')).toBe( - undefined - ); + expect( + new DisplayNames('zh', {type: 'language', fallback: 'none'}).of( + 'zh-Hans-XY' + ) + ).toBe(undefined); }); it('returns undefined when called with language code that valid region subtag but invalid language subtag', () => { - expect(new DisplayNames('zh', {fallback: 'none'}).of('xx-CN')).toBe( - undefined - ); + expect( + new DisplayNames('zh', {type: 'language', fallback: 'none'}).of('xx-CN') + ).toBe(undefined); }); }); }); diff --git a/packages/intl/src/displayName.ts b/packages/intl/src/displayName.ts index 7b88e03caf..8d4e454183 100644 --- a/packages/intl/src/displayName.ts +++ b/packages/intl/src/displayName.ts @@ -24,7 +24,7 @@ export function formatDisplayName( }, getDisplayNames: Formatters['getDisplayNames'], value: Parameters[0], - options: Parameters[1] = {} + options: Parameters[1] ): string | undefined { const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames; if (!DisplayNames) { diff --git a/packages/intl/src/types.ts b/packages/intl/src/types.ts index 5c3c8a6366..921a484386 100644 --- a/packages/intl/src/types.ts +++ b/packages/intl/src/types.ts @@ -134,7 +134,7 @@ export interface IntlFormatters { ): T | string | Array; formatDisplayName( value: Parameters[0], - opts?: FormatDisplayNameOptions + opts: FormatDisplayNameOptions ): string | undefined; } diff --git a/packages/intl/tests/formatDisplayNames.test.ts b/packages/intl/tests/formatDisplayNames.test.ts index e433d94210..f6c4adde56 100644 --- a/packages/intl/tests/formatDisplayNames.test.ts +++ b/packages/intl/tests/formatDisplayNames.test.ts @@ -42,17 +42,20 @@ describe('format API', () => { }); it('should return locale display name as string', function () { - expect(formatDisplayName('zh-Hans-SG')).toBe( + expect(formatDisplayName('zh-Hans-SG', {type: 'language'})).toBe( 'Simplified Chinese (Singapore)' ); }); it('will return undefined if Intl.DisplayName would return undefined', function () { const displayName = new (Intl as any).DisplayNames('en', { + type: 'language', fallback: 'none', }); expect(displayName.of('xx-XX')).toBeUndefined(); - expect(formatDisplayName('xx-XX', {fallback: 'none'})).toBeUndefined(); + expect( + formatDisplayName('xx-XX', {type: 'language', fallback: 'none'}) + ).toBeUndefined(); }); }); }); diff --git a/packages/react-intl/tests/unit/components/__snapshots__/displayName.tsx.snap b/packages/react-intl/tests/unit/components/__snapshots__/displayName.tsx.snap index 6bc4c02c0c..5683cb85c7 100644 --- a/packages/react-intl/tests/unit/components/__snapshots__/displayName.tsx.snap +++ b/packages/react-intl/tests/unit/components/__snapshots__/displayName.tsx.snap @@ -12,6 +12,7 @@ exports[` accepts Intl.DisplayNames options 1`] = ` exports[` renders an empty <> when the underlying DisplayNames would return undefined 1`] = ` `; diff --git a/packages/react-intl/tests/unit/components/displayName.tsx b/packages/react-intl/tests/unit/components/displayName.tsx index 4ef62fb77d..456b67b8c4 100644 --- a/packages/react-intl/tests/unit/components/displayName.tsx +++ b/packages/react-intl/tests/unit/components/displayName.tsx @@ -41,6 +41,7 @@ describe('', () => { it('renders an empty <> when the underlying DisplayNames would return undefined', () => { // When fallback is none, it will return undefined if no display name is available. const displayNames = new (Intl as any).DisplayNames('en', { + type: 'language', fallback: 'none', }); expect(displayNames.of('xx-XX')).toBeUndefined(); @@ -48,6 +49,7 @@ describe('', () => { // Now let's do the same with const rendered = mountWithProvider( { + type: 'language', fallback: 'none', value: 'xx-XX', }, diff --git a/translated/es-ES/website/docs/intl.md b/translated/es-ES/website/docs/intl.md index 6340896fc6..7dedc166c6 100644 --- a/translated/es-ES/website/docs/intl.md +++ b/translated/es-ES/website/docs/intl.md @@ -43,11 +43,11 @@ The core of `@formatjs/intl` is the `intl` object (of type [`IntlShape`](#intlsh This allows you to create an `IntlShape` object that contains all `format*` methods. For example: ```tsx -import {createIntl, createIntlCache} from '@formatjs/intl' +import {createIntl, createIntlCache} from '@formatjs/intl'; // This is optional but highly recommended // since it prevents memory leak -const cache = createIntlCache() +const cache = createIntlCache(); const intl = createIntl( { @@ -55,71 +55,71 @@ const intl = createIntl( messages: {}, }, cache -) +); // Call imperatively -intl.formatNumber(20) +intl.formatNumber(20); ``` ## IntlShape ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - messages: Record | Record - defaultLocale: string - defaultRichTextElements?: Record> - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + messages: Record | Record; + defaultLocale: string; + defaultRichTextElements?: Record>; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date | string, opts?: FormatDateOptions): string - formatTime(value: number | Date | string, opts?: FormatDateOptions): string + formatDate(value: number | Date | string, opts?: FormatDateOptions): string; + formatTime(value: number | Date | string, opts?: FormatDateOptions): string; formatDateToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatTimeToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatRelativeTime( value: number, unit?: FormattableUnit, opts?: FormatRelativeTimeOptions - ): string - formatNumber(value: number, opts?: FormatNumberOptions): string + ): string; + formatNumber(value: number, opts?: FormatNumberOptions): string; formatNumberToParts( value: number, opts?: FormatNumberOptions - ): Intl.NumberFormatPart[] + ): Intl.NumberFormatPart[]; formatPlural( value: number | string, opts?: FormatPluralOptions - ): ReturnType + ): ReturnType; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): string + ): string; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): R - formatList(values: Array, opts?: FormatListOptions): string + ): R; + formatList(values: Array, opts?: FormatListOptions): string; formatList( values: Array, opts?: FormatListOptions - ): T | string | Array + ): T | string | Array; formatDisplayName( value: string, opts?: FormatDisplayNameOptions - ): string | undefined + ): string | undefined; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` The definition above shows what the `intl` object will look like. It's made up of two parts: @@ -149,7 +149,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -159,7 +159,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -168,7 +168,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -183,7 +183,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -199,30 +199,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -233,13 +233,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -251,7 +251,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -259,20 +259,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -280,15 +280,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -299,24 +299,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -325,36 +325,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -391,10 +391,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -414,18 +414,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -489,22 +489,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `@formatjs/intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from '@formatjs/intl' +import {defineMessages, defineMessage} from '@formatjs/intl'; const messages = defineMessages({ greeting: { @@ -512,11 +512,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/es-ES/website/docs/react-intl/api.md b/translated/es-ES/website/docs/react-intl/api.md index fa03ab7193..7bf1f44ffd 100644 --- a/translated/es-ES/website/docs/react-intl/api.md +++ b/translated/es-ES/website/docs/react-intl/api.md @@ -30,19 +30,19 @@ There are a few ways to get access to the `intl` object: If a component can be expressed in a form of function component, using `useIntl` hook can be handy. This `useIntl` hook does not expect any option as its argument when being called. Typically, here is how you would like to use: ```tsx -import React from 'react' -import {useIntl, FormattedDate} from 'react-intl' +import React from 'react'; +import {useIntl, FormattedDate} from 'react-intl'; const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => { - const intl = useIntl() + const intl = useIntl(); return ( - ) -} + ); +}; -export default FunctionComponent +export default FunctionComponent; ``` To keep the API surface clean and simple, we only provide `useIntl` hook in the package. If preferable, user can wrap this built-in hook to make customized hook like `useFormatMessage` easily. Please visit React's official website for more general [introduction on React hooks](https://reactjs.org/docs/hooks-intro.html). @@ -51,12 +51,12 @@ To keep the API surface clean and simple, we only provide `useIntl` hook in the ```ts type WrappedComponentProps = { - [k in IntlPropName]: IntlShape -} + [k in IntlPropName]: IntlShape; +}; type WithIntlProps

= Omit & { - forwardedRef?: React.Ref -} + forwardedRef?: React.Ref; +}; function injectIntl< IntlPropName extends string = 'intl', @@ -65,8 +65,8 @@ function injectIntl< WrappedComponent: React.ComponentType

, options?: Opts ): React.ComponentType> & { - WrappedComponent: typeof WrappedComponent -} + WrappedComponent: typeof WrappedComponent; +}; ``` This function is exported by the `react-intl` package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its `props`. (This is similar to the connect-to-stores pattern found in many Flux implementations.) @@ -74,26 +74,26 @@ This function is exported by the `react-intl` package and is a High-Order Compon By default, the formatting API will be provided to the wrapped component via `props.intl`, but this can be overridden when specifying `options.intlPropName`. The value of the prop will be of type [`IntlShape`](#Intlshape), defined in the next section. ```tsx -import React, {PropTypes} from 'react' -import {injectIntl, FormattedDate} from 'react-intl' +import React, {PropTypes} from 'react'; +import {injectIntl, FormattedDate} from 'react-intl'; interface Props { - date: Date | number + date: Date | number; } const FunctionalComponent: React.FC = props => { const { date, intl, // Injected by `injectIntl` - } = props + } = props; return ( - ) -} + ); +}; -export default injectIntl(FunctionalComponent) +export default injectIntl(FunctionalComponent); ``` ## createIntl @@ -123,30 +123,30 @@ intl.formatNumber(20) ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - textComponent?: React.ComponentType | keyof React.ReactHTML - messages: Record | Record - defaultLocale: string - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + textComponent?: React.ComponentType | keyof React.ReactHTML; + messages: Record | Record; + defaultLocale: string; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date, opts: FormatDateOptions): string - formatTime(value: number | Date, opts: FormatDateOptions): string + formatDate(value: number | Date, opts: FormatDateOptions): string; + formatTime(value: number | Date, opts: FormatDateOptions): string; formatRelativeTime( value: number, unit: Unit, opts: FormatRelativeOptions - ): string - formatNumber(value: number, opts: FormatNumberOptions): string - formatPlural(value: number, opts: FormatPluralOptions): string - formatMessage(descriptor: MessageDescriptor, values: any): string + ): string; + formatNumber(value: number, opts: FormatNumberOptions): string; + formatPlural(value: number, opts: FormatPluralOptions): string; + formatMessage(descriptor: MessageDescriptor, values: any): string; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` This interface is exported by the `react-intl` package that can be used in conjunction with the [`injectIntl`](#injectintl) HOC factory function. @@ -186,7 +186,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -196,7 +196,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -205,7 +205,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -220,7 +220,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -236,30 +236,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -270,13 +270,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -288,7 +288,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -296,20 +296,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -317,15 +317,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -336,24 +336,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -362,36 +362,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -428,10 +428,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -451,18 +451,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -526,22 +526,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `react-intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from 'react-intl' +import {defineMessages, defineMessage} from 'react-intl'; const messages = defineMessages({ greeting: { @@ -549,11 +549,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/fr-FR/website/docs/intl.md b/translated/fr-FR/website/docs/intl.md index 6340896fc6..7dedc166c6 100644 --- a/translated/fr-FR/website/docs/intl.md +++ b/translated/fr-FR/website/docs/intl.md @@ -43,11 +43,11 @@ The core of `@formatjs/intl` is the `intl` object (of type [`IntlShape`](#intlsh This allows you to create an `IntlShape` object that contains all `format*` methods. For example: ```tsx -import {createIntl, createIntlCache} from '@formatjs/intl' +import {createIntl, createIntlCache} from '@formatjs/intl'; // This is optional but highly recommended // since it prevents memory leak -const cache = createIntlCache() +const cache = createIntlCache(); const intl = createIntl( { @@ -55,71 +55,71 @@ const intl = createIntl( messages: {}, }, cache -) +); // Call imperatively -intl.formatNumber(20) +intl.formatNumber(20); ``` ## IntlShape ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - messages: Record | Record - defaultLocale: string - defaultRichTextElements?: Record> - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + messages: Record | Record; + defaultLocale: string; + defaultRichTextElements?: Record>; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date | string, opts?: FormatDateOptions): string - formatTime(value: number | Date | string, opts?: FormatDateOptions): string + formatDate(value: number | Date | string, opts?: FormatDateOptions): string; + formatTime(value: number | Date | string, opts?: FormatDateOptions): string; formatDateToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatTimeToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatRelativeTime( value: number, unit?: FormattableUnit, opts?: FormatRelativeTimeOptions - ): string - formatNumber(value: number, opts?: FormatNumberOptions): string + ): string; + formatNumber(value: number, opts?: FormatNumberOptions): string; formatNumberToParts( value: number, opts?: FormatNumberOptions - ): Intl.NumberFormatPart[] + ): Intl.NumberFormatPart[]; formatPlural( value: number | string, opts?: FormatPluralOptions - ): ReturnType + ): ReturnType; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): string + ): string; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): R - formatList(values: Array, opts?: FormatListOptions): string + ): R; + formatList(values: Array, opts?: FormatListOptions): string; formatList( values: Array, opts?: FormatListOptions - ): T | string | Array + ): T | string | Array; formatDisplayName( value: string, opts?: FormatDisplayNameOptions - ): string | undefined + ): string | undefined; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` The definition above shows what the `intl` object will look like. It's made up of two parts: @@ -149,7 +149,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -159,7 +159,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -168,7 +168,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -183,7 +183,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -199,30 +199,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -233,13 +233,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -251,7 +251,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -259,20 +259,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -280,15 +280,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -299,24 +299,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -325,36 +325,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -391,10 +391,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -414,18 +414,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -489,22 +489,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `@formatjs/intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from '@formatjs/intl' +import {defineMessages, defineMessage} from '@formatjs/intl'; const messages = defineMessages({ greeting: { @@ -512,11 +512,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/fr-FR/website/docs/react-intl/api.md b/translated/fr-FR/website/docs/react-intl/api.md index fa03ab7193..7bf1f44ffd 100644 --- a/translated/fr-FR/website/docs/react-intl/api.md +++ b/translated/fr-FR/website/docs/react-intl/api.md @@ -30,19 +30,19 @@ There are a few ways to get access to the `intl` object: If a component can be expressed in a form of function component, using `useIntl` hook can be handy. This `useIntl` hook does not expect any option as its argument when being called. Typically, here is how you would like to use: ```tsx -import React from 'react' -import {useIntl, FormattedDate} from 'react-intl' +import React from 'react'; +import {useIntl, FormattedDate} from 'react-intl'; const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => { - const intl = useIntl() + const intl = useIntl(); return ( - ) -} + ); +}; -export default FunctionComponent +export default FunctionComponent; ``` To keep the API surface clean and simple, we only provide `useIntl` hook in the package. If preferable, user can wrap this built-in hook to make customized hook like `useFormatMessage` easily. Please visit React's official website for more general [introduction on React hooks](https://reactjs.org/docs/hooks-intro.html). @@ -51,12 +51,12 @@ To keep the API surface clean and simple, we only provide `useIntl` hook in the ```ts type WrappedComponentProps = { - [k in IntlPropName]: IntlShape -} + [k in IntlPropName]: IntlShape; +}; type WithIntlProps

= Omit & { - forwardedRef?: React.Ref -} + forwardedRef?: React.Ref; +}; function injectIntl< IntlPropName extends string = 'intl', @@ -65,8 +65,8 @@ function injectIntl< WrappedComponent: React.ComponentType

, options?: Opts ): React.ComponentType> & { - WrappedComponent: typeof WrappedComponent -} + WrappedComponent: typeof WrappedComponent; +}; ``` This function is exported by the `react-intl` package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its `props`. (This is similar to the connect-to-stores pattern found in many Flux implementations.) @@ -74,26 +74,26 @@ This function is exported by the `react-intl` package and is a High-Order Compon By default, the formatting API will be provided to the wrapped component via `props.intl`, but this can be overridden when specifying `options.intlPropName`. The value of the prop will be of type [`IntlShape`](#Intlshape), defined in the next section. ```tsx -import React, {PropTypes} from 'react' -import {injectIntl, FormattedDate} from 'react-intl' +import React, {PropTypes} from 'react'; +import {injectIntl, FormattedDate} from 'react-intl'; interface Props { - date: Date | number + date: Date | number; } const FunctionalComponent: React.FC = props => { const { date, intl, // Injected by `injectIntl` - } = props + } = props; return ( - ) -} + ); +}; -export default injectIntl(FunctionalComponent) +export default injectIntl(FunctionalComponent); ``` ## createIntl @@ -123,30 +123,30 @@ intl.formatNumber(20) ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - textComponent?: React.ComponentType | keyof React.ReactHTML - messages: Record | Record - defaultLocale: string - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + textComponent?: React.ComponentType | keyof React.ReactHTML; + messages: Record | Record; + defaultLocale: string; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date, opts: FormatDateOptions): string - formatTime(value: number | Date, opts: FormatDateOptions): string + formatDate(value: number | Date, opts: FormatDateOptions): string; + formatTime(value: number | Date, opts: FormatDateOptions): string; formatRelativeTime( value: number, unit: Unit, opts: FormatRelativeOptions - ): string - formatNumber(value: number, opts: FormatNumberOptions): string - formatPlural(value: number, opts: FormatPluralOptions): string - formatMessage(descriptor: MessageDescriptor, values: any): string + ): string; + formatNumber(value: number, opts: FormatNumberOptions): string; + formatPlural(value: number, opts: FormatPluralOptions): string; + formatMessage(descriptor: MessageDescriptor, values: any): string; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` This interface is exported by the `react-intl` package that can be used in conjunction with the [`injectIntl`](#injectintl) HOC factory function. @@ -186,7 +186,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -196,7 +196,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -205,7 +205,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -220,7 +220,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -236,30 +236,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -270,13 +270,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -288,7 +288,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -296,20 +296,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -317,15 +317,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -336,24 +336,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -362,36 +362,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -428,10 +428,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -451,18 +451,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -526,22 +526,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `react-intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from 'react-intl' +import {defineMessages, defineMessage} from 'react-intl'; const messages = defineMessages({ greeting: { @@ -549,11 +549,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/ja-JP/website/docs/intl.md b/translated/ja-JP/website/docs/intl.md index 6340896fc6..7dedc166c6 100644 --- a/translated/ja-JP/website/docs/intl.md +++ b/translated/ja-JP/website/docs/intl.md @@ -43,11 +43,11 @@ The core of `@formatjs/intl` is the `intl` object (of type [`IntlShape`](#intlsh This allows you to create an `IntlShape` object that contains all `format*` methods. For example: ```tsx -import {createIntl, createIntlCache} from '@formatjs/intl' +import {createIntl, createIntlCache} from '@formatjs/intl'; // This is optional but highly recommended // since it prevents memory leak -const cache = createIntlCache() +const cache = createIntlCache(); const intl = createIntl( { @@ -55,71 +55,71 @@ const intl = createIntl( messages: {}, }, cache -) +); // Call imperatively -intl.formatNumber(20) +intl.formatNumber(20); ``` ## IntlShape ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - messages: Record | Record - defaultLocale: string - defaultRichTextElements?: Record> - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + messages: Record | Record; + defaultLocale: string; + defaultRichTextElements?: Record>; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date | string, opts?: FormatDateOptions): string - formatTime(value: number | Date | string, opts?: FormatDateOptions): string + formatDate(value: number | Date | string, opts?: FormatDateOptions): string; + formatTime(value: number | Date | string, opts?: FormatDateOptions): string; formatDateToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatTimeToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatRelativeTime( value: number, unit?: FormattableUnit, opts?: FormatRelativeTimeOptions - ): string - formatNumber(value: number, opts?: FormatNumberOptions): string + ): string; + formatNumber(value: number, opts?: FormatNumberOptions): string; formatNumberToParts( value: number, opts?: FormatNumberOptions - ): Intl.NumberFormatPart[] + ): Intl.NumberFormatPart[]; formatPlural( value: number | string, opts?: FormatPluralOptions - ): ReturnType + ): ReturnType; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): string + ): string; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): R - formatList(values: Array, opts?: FormatListOptions): string + ): R; + formatList(values: Array, opts?: FormatListOptions): string; formatList( values: Array, opts?: FormatListOptions - ): T | string | Array + ): T | string | Array; formatDisplayName( value: string, opts?: FormatDisplayNameOptions - ): string | undefined + ): string | undefined; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` The definition above shows what the `intl` object will look like. It's made up of two parts: @@ -149,7 +149,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -159,7 +159,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -168,7 +168,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -183,7 +183,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -199,30 +199,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -233,13 +233,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -251,7 +251,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -259,20 +259,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -280,15 +280,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -299,24 +299,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -325,36 +325,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -391,10 +391,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -414,18 +414,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -489,22 +489,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `@formatjs/intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from '@formatjs/intl' +import {defineMessages, defineMessage} from '@formatjs/intl'; const messages = defineMessages({ greeting: { @@ -512,11 +512,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/ja-JP/website/docs/react-intl/api.md b/translated/ja-JP/website/docs/react-intl/api.md index fa03ab7193..7bf1f44ffd 100644 --- a/translated/ja-JP/website/docs/react-intl/api.md +++ b/translated/ja-JP/website/docs/react-intl/api.md @@ -30,19 +30,19 @@ There are a few ways to get access to the `intl` object: If a component can be expressed in a form of function component, using `useIntl` hook can be handy. This `useIntl` hook does not expect any option as its argument when being called. Typically, here is how you would like to use: ```tsx -import React from 'react' -import {useIntl, FormattedDate} from 'react-intl' +import React from 'react'; +import {useIntl, FormattedDate} from 'react-intl'; const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => { - const intl = useIntl() + const intl = useIntl(); return ( - ) -} + ); +}; -export default FunctionComponent +export default FunctionComponent; ``` To keep the API surface clean and simple, we only provide `useIntl` hook in the package. If preferable, user can wrap this built-in hook to make customized hook like `useFormatMessage` easily. Please visit React's official website for more general [introduction on React hooks](https://reactjs.org/docs/hooks-intro.html). @@ -51,12 +51,12 @@ To keep the API surface clean and simple, we only provide `useIntl` hook in the ```ts type WrappedComponentProps = { - [k in IntlPropName]: IntlShape -} + [k in IntlPropName]: IntlShape; +}; type WithIntlProps

= Omit & { - forwardedRef?: React.Ref -} + forwardedRef?: React.Ref; +}; function injectIntl< IntlPropName extends string = 'intl', @@ -65,8 +65,8 @@ function injectIntl< WrappedComponent: React.ComponentType

, options?: Opts ): React.ComponentType> & { - WrappedComponent: typeof WrappedComponent -} + WrappedComponent: typeof WrappedComponent; +}; ``` This function is exported by the `react-intl` package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its `props`. (This is similar to the connect-to-stores pattern found in many Flux implementations.) @@ -74,26 +74,26 @@ This function is exported by the `react-intl` package and is a High-Order Compon By default, the formatting API will be provided to the wrapped component via `props.intl`, but this can be overridden when specifying `options.intlPropName`. The value of the prop will be of type [`IntlShape`](#Intlshape), defined in the next section. ```tsx -import React, {PropTypes} from 'react' -import {injectIntl, FormattedDate} from 'react-intl' +import React, {PropTypes} from 'react'; +import {injectIntl, FormattedDate} from 'react-intl'; interface Props { - date: Date | number + date: Date | number; } const FunctionalComponent: React.FC = props => { const { date, intl, // Injected by `injectIntl` - } = props + } = props; return ( - ) -} + ); +}; -export default injectIntl(FunctionalComponent) +export default injectIntl(FunctionalComponent); ``` ## createIntl @@ -123,30 +123,30 @@ intl.formatNumber(20) ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - textComponent?: React.ComponentType | keyof React.ReactHTML - messages: Record | Record - defaultLocale: string - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + textComponent?: React.ComponentType | keyof React.ReactHTML; + messages: Record | Record; + defaultLocale: string; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date, opts: FormatDateOptions): string - formatTime(value: number | Date, opts: FormatDateOptions): string + formatDate(value: number | Date, opts: FormatDateOptions): string; + formatTime(value: number | Date, opts: FormatDateOptions): string; formatRelativeTime( value: number, unit: Unit, opts: FormatRelativeOptions - ): string - formatNumber(value: number, opts: FormatNumberOptions): string - formatPlural(value: number, opts: FormatPluralOptions): string - formatMessage(descriptor: MessageDescriptor, values: any): string + ): string; + formatNumber(value: number, opts: FormatNumberOptions): string; + formatPlural(value: number, opts: FormatPluralOptions): string; + formatMessage(descriptor: MessageDescriptor, values: any): string; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` This interface is exported by the `react-intl` package that can be used in conjunction with the [`injectIntl`](#injectintl) HOC factory function. @@ -186,7 +186,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -196,7 +196,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -205,7 +205,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -220,7 +220,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -236,30 +236,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -270,13 +270,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -288,7 +288,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -296,20 +296,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -317,15 +317,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -336,24 +336,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -362,36 +362,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -428,10 +428,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -451,18 +451,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -526,22 +526,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `react-intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from 'react-intl' +import {defineMessages, defineMessage} from 'react-intl'; const messages = defineMessages({ greeting: { @@ -549,11 +549,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/pt-PT/website/docs/intl.md b/translated/pt-PT/website/docs/intl.md index 6340896fc6..7dedc166c6 100644 --- a/translated/pt-PT/website/docs/intl.md +++ b/translated/pt-PT/website/docs/intl.md @@ -43,11 +43,11 @@ The core of `@formatjs/intl` is the `intl` object (of type [`IntlShape`](#intlsh This allows you to create an `IntlShape` object that contains all `format*` methods. For example: ```tsx -import {createIntl, createIntlCache} from '@formatjs/intl' +import {createIntl, createIntlCache} from '@formatjs/intl'; // This is optional but highly recommended // since it prevents memory leak -const cache = createIntlCache() +const cache = createIntlCache(); const intl = createIntl( { @@ -55,71 +55,71 @@ const intl = createIntl( messages: {}, }, cache -) +); // Call imperatively -intl.formatNumber(20) +intl.formatNumber(20); ``` ## IntlShape ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - messages: Record | Record - defaultLocale: string - defaultRichTextElements?: Record> - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + messages: Record | Record; + defaultLocale: string; + defaultRichTextElements?: Record>; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date | string, opts?: FormatDateOptions): string - formatTime(value: number | Date | string, opts?: FormatDateOptions): string + formatDate(value: number | Date | string, opts?: FormatDateOptions): string; + formatTime(value: number | Date | string, opts?: FormatDateOptions): string; formatDateToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatTimeToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatRelativeTime( value: number, unit?: FormattableUnit, opts?: FormatRelativeTimeOptions - ): string - formatNumber(value: number, opts?: FormatNumberOptions): string + ): string; + formatNumber(value: number, opts?: FormatNumberOptions): string; formatNumberToParts( value: number, opts?: FormatNumberOptions - ): Intl.NumberFormatPart[] + ): Intl.NumberFormatPart[]; formatPlural( value: number | string, opts?: FormatPluralOptions - ): ReturnType + ): ReturnType; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): string + ): string; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): R - formatList(values: Array, opts?: FormatListOptions): string + ): R; + formatList(values: Array, opts?: FormatListOptions): string; formatList( values: Array, opts?: FormatListOptions - ): T | string | Array + ): T | string | Array; formatDisplayName( value: string, opts?: FormatDisplayNameOptions - ): string | undefined + ): string | undefined; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` The definition above shows what the `intl` object will look like. It's made up of two parts: @@ -149,7 +149,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -159,7 +159,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -168,7 +168,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -183,7 +183,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -199,30 +199,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -233,13 +233,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -251,7 +251,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -259,20 +259,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -280,15 +280,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -299,24 +299,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -325,36 +325,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -391,10 +391,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -414,18 +414,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -489,22 +489,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `@formatjs/intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from '@formatjs/intl' +import {defineMessages, defineMessage} from '@formatjs/intl'; const messages = defineMessages({ greeting: { @@ -512,11 +512,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/pt-PT/website/docs/react-intl/api.md b/translated/pt-PT/website/docs/react-intl/api.md index fa03ab7193..7bf1f44ffd 100644 --- a/translated/pt-PT/website/docs/react-intl/api.md +++ b/translated/pt-PT/website/docs/react-intl/api.md @@ -30,19 +30,19 @@ There are a few ways to get access to the `intl` object: If a component can be expressed in a form of function component, using `useIntl` hook can be handy. This `useIntl` hook does not expect any option as its argument when being called. Typically, here is how you would like to use: ```tsx -import React from 'react' -import {useIntl, FormattedDate} from 'react-intl' +import React from 'react'; +import {useIntl, FormattedDate} from 'react-intl'; const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => { - const intl = useIntl() + const intl = useIntl(); return ( - ) -} + ); +}; -export default FunctionComponent +export default FunctionComponent; ``` To keep the API surface clean and simple, we only provide `useIntl` hook in the package. If preferable, user can wrap this built-in hook to make customized hook like `useFormatMessage` easily. Please visit React's official website for more general [introduction on React hooks](https://reactjs.org/docs/hooks-intro.html). @@ -51,12 +51,12 @@ To keep the API surface clean and simple, we only provide `useIntl` hook in the ```ts type WrappedComponentProps = { - [k in IntlPropName]: IntlShape -} + [k in IntlPropName]: IntlShape; +}; type WithIntlProps

= Omit & { - forwardedRef?: React.Ref -} + forwardedRef?: React.Ref; +}; function injectIntl< IntlPropName extends string = 'intl', @@ -65,8 +65,8 @@ function injectIntl< WrappedComponent: React.ComponentType

, options?: Opts ): React.ComponentType> & { - WrappedComponent: typeof WrappedComponent -} + WrappedComponent: typeof WrappedComponent; +}; ``` This function is exported by the `react-intl` package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its `props`. (This is similar to the connect-to-stores pattern found in many Flux implementations.) @@ -74,26 +74,26 @@ This function is exported by the `react-intl` package and is a High-Order Compon By default, the formatting API will be provided to the wrapped component via `props.intl`, but this can be overridden when specifying `options.intlPropName`. The value of the prop will be of type [`IntlShape`](#Intlshape), defined in the next section. ```tsx -import React, {PropTypes} from 'react' -import {injectIntl, FormattedDate} from 'react-intl' +import React, {PropTypes} from 'react'; +import {injectIntl, FormattedDate} from 'react-intl'; interface Props { - date: Date | number + date: Date | number; } const FunctionalComponent: React.FC = props => { const { date, intl, // Injected by `injectIntl` - } = props + } = props; return ( - ) -} + ); +}; -export default injectIntl(FunctionalComponent) +export default injectIntl(FunctionalComponent); ``` ## createIntl @@ -123,30 +123,30 @@ intl.formatNumber(20) ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - textComponent?: React.ComponentType | keyof React.ReactHTML - messages: Record | Record - defaultLocale: string - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + textComponent?: React.ComponentType | keyof React.ReactHTML; + messages: Record | Record; + defaultLocale: string; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date, opts: FormatDateOptions): string - formatTime(value: number | Date, opts: FormatDateOptions): string + formatDate(value: number | Date, opts: FormatDateOptions): string; + formatTime(value: number | Date, opts: FormatDateOptions): string; formatRelativeTime( value: number, unit: Unit, opts: FormatRelativeOptions - ): string - formatNumber(value: number, opts: FormatNumberOptions): string - formatPlural(value: number, opts: FormatPluralOptions): string - formatMessage(descriptor: MessageDescriptor, values: any): string + ): string; + formatNumber(value: number, opts: FormatNumberOptions): string; + formatPlural(value: number, opts: FormatPluralOptions): string; + formatMessage(descriptor: MessageDescriptor, values: any): string; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` This interface is exported by the `react-intl` package that can be used in conjunction with the [`injectIntl`](#injectintl) HOC factory function. @@ -186,7 +186,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -196,7 +196,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -205,7 +205,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -220,7 +220,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -236,30 +236,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -270,13 +270,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -288,7 +288,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -296,20 +296,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -317,15 +317,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -336,24 +336,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -362,36 +362,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -428,10 +428,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -451,18 +451,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -526,22 +526,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `react-intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from 'react-intl' +import {defineMessages, defineMessage} from 'react-intl'; const messages = defineMessages({ greeting: { @@ -549,11 +549,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/zh-CN/website/docs/intl.md b/translated/zh-CN/website/docs/intl.md index 6340896fc6..7dedc166c6 100644 --- a/translated/zh-CN/website/docs/intl.md +++ b/translated/zh-CN/website/docs/intl.md @@ -43,11 +43,11 @@ The core of `@formatjs/intl` is the `intl` object (of type [`IntlShape`](#intlsh This allows you to create an `IntlShape` object that contains all `format*` methods. For example: ```tsx -import {createIntl, createIntlCache} from '@formatjs/intl' +import {createIntl, createIntlCache} from '@formatjs/intl'; // This is optional but highly recommended // since it prevents memory leak -const cache = createIntlCache() +const cache = createIntlCache(); const intl = createIntl( { @@ -55,71 +55,71 @@ const intl = createIntl( messages: {}, }, cache -) +); // Call imperatively -intl.formatNumber(20) +intl.formatNumber(20); ``` ## IntlShape ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - messages: Record | Record - defaultLocale: string - defaultRichTextElements?: Record> - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + messages: Record | Record; + defaultLocale: string; + defaultRichTextElements?: Record>; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date | string, opts?: FormatDateOptions): string - formatTime(value: number | Date | string, opts?: FormatDateOptions): string + formatDate(value: number | Date | string, opts?: FormatDateOptions): string; + formatTime(value: number | Date | string, opts?: FormatDateOptions): string; formatDateToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatTimeToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatRelativeTime( value: number, unit?: FormattableUnit, opts?: FormatRelativeTimeOptions - ): string - formatNumber(value: number, opts?: FormatNumberOptions): string + ): string; + formatNumber(value: number, opts?: FormatNumberOptions): string; formatNumberToParts( value: number, opts?: FormatNumberOptions - ): Intl.NumberFormatPart[] + ): Intl.NumberFormatPart[]; formatPlural( value: number | string, opts?: FormatPluralOptions - ): ReturnType + ): ReturnType; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): string + ): string; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): R - formatList(values: Array, opts?: FormatListOptions): string + ): R; + formatList(values: Array, opts?: FormatListOptions): string; formatList( values: Array, opts?: FormatListOptions - ): T | string | Array + ): T | string | Array; formatDisplayName( value: string, opts?: FormatDisplayNameOptions - ): string | undefined + ): string | undefined; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` The definition above shows what the `intl` object will look like. It's made up of two parts: @@ -149,7 +149,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -159,7 +159,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -168,7 +168,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -183,7 +183,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -199,30 +199,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -233,13 +233,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -251,7 +251,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -259,20 +259,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -280,15 +280,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -299,24 +299,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -325,36 +325,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -391,10 +391,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -414,18 +414,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -489,22 +489,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `@formatjs/intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from '@formatjs/intl' +import {defineMessages, defineMessage} from '@formatjs/intl'; const messages = defineMessages({ greeting: { @@ -512,11 +512,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/zh-CN/website/docs/react-intl/api.md b/translated/zh-CN/website/docs/react-intl/api.md index fa03ab7193..7bf1f44ffd 100644 --- a/translated/zh-CN/website/docs/react-intl/api.md +++ b/translated/zh-CN/website/docs/react-intl/api.md @@ -30,19 +30,19 @@ There are a few ways to get access to the `intl` object: If a component can be expressed in a form of function component, using `useIntl` hook can be handy. This `useIntl` hook does not expect any option as its argument when being called. Typically, here is how you would like to use: ```tsx -import React from 'react' -import {useIntl, FormattedDate} from 'react-intl' +import React from 'react'; +import {useIntl, FormattedDate} from 'react-intl'; const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => { - const intl = useIntl() + const intl = useIntl(); return ( - ) -} + ); +}; -export default FunctionComponent +export default FunctionComponent; ``` To keep the API surface clean and simple, we only provide `useIntl` hook in the package. If preferable, user can wrap this built-in hook to make customized hook like `useFormatMessage` easily. Please visit React's official website for more general [introduction on React hooks](https://reactjs.org/docs/hooks-intro.html). @@ -51,12 +51,12 @@ To keep the API surface clean and simple, we only provide `useIntl` hook in the ```ts type WrappedComponentProps = { - [k in IntlPropName]: IntlShape -} + [k in IntlPropName]: IntlShape; +}; type WithIntlProps

= Omit & { - forwardedRef?: React.Ref -} + forwardedRef?: React.Ref; +}; function injectIntl< IntlPropName extends string = 'intl', @@ -65,8 +65,8 @@ function injectIntl< WrappedComponent: React.ComponentType

, options?: Opts ): React.ComponentType> & { - WrappedComponent: typeof WrappedComponent -} + WrappedComponent: typeof WrappedComponent; +}; ``` This function is exported by the `react-intl` package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its `props`. (This is similar to the connect-to-stores pattern found in many Flux implementations.) @@ -74,26 +74,26 @@ This function is exported by the `react-intl` package and is a High-Order Compon By default, the formatting API will be provided to the wrapped component via `props.intl`, but this can be overridden when specifying `options.intlPropName`. The value of the prop will be of type [`IntlShape`](#Intlshape), defined in the next section. ```tsx -import React, {PropTypes} from 'react' -import {injectIntl, FormattedDate} from 'react-intl' +import React, {PropTypes} from 'react'; +import {injectIntl, FormattedDate} from 'react-intl'; interface Props { - date: Date | number + date: Date | number; } const FunctionalComponent: React.FC = props => { const { date, intl, // Injected by `injectIntl` - } = props + } = props; return ( - ) -} + ); +}; -export default injectIntl(FunctionalComponent) +export default injectIntl(FunctionalComponent); ``` ## createIntl @@ -123,30 +123,30 @@ intl.formatNumber(20) ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - textComponent?: React.ComponentType | keyof React.ReactHTML - messages: Record | Record - defaultLocale: string - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + textComponent?: React.ComponentType | keyof React.ReactHTML; + messages: Record | Record; + defaultLocale: string; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date, opts: FormatDateOptions): string - formatTime(value: number | Date, opts: FormatDateOptions): string + formatDate(value: number | Date, opts: FormatDateOptions): string; + formatTime(value: number | Date, opts: FormatDateOptions): string; formatRelativeTime( value: number, unit: Unit, opts: FormatRelativeOptions - ): string - formatNumber(value: number, opts: FormatNumberOptions): string - formatPlural(value: number, opts: FormatPluralOptions): string - formatMessage(descriptor: MessageDescriptor, values: any): string + ): string; + formatNumber(value: number, opts: FormatNumberOptions): string; + formatPlural(value: number, opts: FormatPluralOptions): string; + formatMessage(descriptor: MessageDescriptor, values: any): string; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` This interface is exported by the `react-intl` package that can be used in conjunction with the [`injectIntl`](#injectintl) HOC factory function. @@ -186,7 +186,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -196,7 +196,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -205,7 +205,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -220,7 +220,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -236,30 +236,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -270,13 +270,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -288,7 +288,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -296,20 +296,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -317,15 +317,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -336,24 +336,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -362,36 +362,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -428,10 +428,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -451,18 +451,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -526,22 +526,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `react-intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from 'react-intl' +import {defineMessages, defineMessage} from 'react-intl'; const messages = defineMessages({ greeting: { @@ -549,11 +549,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/zh-TW/website/docs/intl.md b/translated/zh-TW/website/docs/intl.md index 6340896fc6..7dedc166c6 100644 --- a/translated/zh-TW/website/docs/intl.md +++ b/translated/zh-TW/website/docs/intl.md @@ -43,11 +43,11 @@ The core of `@formatjs/intl` is the `intl` object (of type [`IntlShape`](#intlsh This allows you to create an `IntlShape` object that contains all `format*` methods. For example: ```tsx -import {createIntl, createIntlCache} from '@formatjs/intl' +import {createIntl, createIntlCache} from '@formatjs/intl'; // This is optional but highly recommended // since it prevents memory leak -const cache = createIntlCache() +const cache = createIntlCache(); const intl = createIntl( { @@ -55,71 +55,71 @@ const intl = createIntl( messages: {}, }, cache -) +); // Call imperatively -intl.formatNumber(20) +intl.formatNumber(20); ``` ## IntlShape ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - messages: Record | Record - defaultLocale: string - defaultRichTextElements?: Record> - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + messages: Record | Record; + defaultLocale: string; + defaultRichTextElements?: Record>; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date | string, opts?: FormatDateOptions): string - formatTime(value: number | Date | string, opts?: FormatDateOptions): string + formatDate(value: number | Date | string, opts?: FormatDateOptions): string; + formatTime(value: number | Date | string, opts?: FormatDateOptions): string; formatDateToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatTimeToParts( value: number | Date | string, opts?: FormatDateOptions - ): Intl.DateTimeFormatPart[] + ): Intl.DateTimeFormatPart[]; formatRelativeTime( value: number, unit?: FormattableUnit, opts?: FormatRelativeTimeOptions - ): string - formatNumber(value: number, opts?: FormatNumberOptions): string + ): string; + formatNumber(value: number, opts?: FormatNumberOptions): string; formatNumberToParts( value: number, opts?: FormatNumberOptions - ): Intl.NumberFormatPart[] + ): Intl.NumberFormatPart[]; formatPlural( value: number | string, opts?: FormatPluralOptions - ): ReturnType + ): ReturnType; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): string + ): string; formatMessage( descriptor: MessageDescriptor, values?: Record> - ): R - formatList(values: Array, opts?: FormatListOptions): string + ): R; + formatList(values: Array, opts?: FormatListOptions): string; formatList( values: Array, opts?: FormatListOptions - ): T | string | Array + ): T | string | Array; formatDisplayName( value: string, opts?: FormatDisplayNameOptions - ): string | undefined + ): string | undefined; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` The definition above shows what the `intl` object will look like. It's made up of two parts: @@ -149,7 +149,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -159,7 +159,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -168,7 +168,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -183,7 +183,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -199,30 +199,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -233,13 +233,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -251,7 +251,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -259,20 +259,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -280,15 +280,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -299,24 +299,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -325,36 +325,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -391,10 +391,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -414,18 +414,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -489,22 +489,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `@formatjs/intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from '@formatjs/intl' +import {defineMessages, defineMessage} from '@formatjs/intl'; const messages = defineMessages({ greeting: { @@ -512,11 +512,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/translated/zh-TW/website/docs/react-intl/api.md b/translated/zh-TW/website/docs/react-intl/api.md index fa03ab7193..7bf1f44ffd 100644 --- a/translated/zh-TW/website/docs/react-intl/api.md +++ b/translated/zh-TW/website/docs/react-intl/api.md @@ -30,19 +30,19 @@ There are a few ways to get access to the `intl` object: If a component can be expressed in a form of function component, using `useIntl` hook can be handy. This `useIntl` hook does not expect any option as its argument when being called. Typically, here is how you would like to use: ```tsx -import React from 'react' -import {useIntl, FormattedDate} from 'react-intl' +import React from 'react'; +import {useIntl, FormattedDate} from 'react-intl'; const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => { - const intl = useIntl() + const intl = useIntl(); return ( - ) -} + ); +}; -export default FunctionComponent +export default FunctionComponent; ``` To keep the API surface clean and simple, we only provide `useIntl` hook in the package. If preferable, user can wrap this built-in hook to make customized hook like `useFormatMessage` easily. Please visit React's official website for more general [introduction on React hooks](https://reactjs.org/docs/hooks-intro.html). @@ -51,12 +51,12 @@ To keep the API surface clean and simple, we only provide `useIntl` hook in the ```ts type WrappedComponentProps = { - [k in IntlPropName]: IntlShape -} + [k in IntlPropName]: IntlShape; +}; type WithIntlProps

= Omit & { - forwardedRef?: React.Ref -} + forwardedRef?: React.Ref; +}; function injectIntl< IntlPropName extends string = 'intl', @@ -65,8 +65,8 @@ function injectIntl< WrappedComponent: React.ComponentType

, options?: Opts ): React.ComponentType> & { - WrappedComponent: typeof WrappedComponent -} + WrappedComponent: typeof WrappedComponent; +}; ``` This function is exported by the `react-intl` package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its `props`. (This is similar to the connect-to-stores pattern found in many Flux implementations.) @@ -74,26 +74,26 @@ This function is exported by the `react-intl` package and is a High-Order Compon By default, the formatting API will be provided to the wrapped component via `props.intl`, but this can be overridden when specifying `options.intlPropName`. The value of the prop will be of type [`IntlShape`](#Intlshape), defined in the next section. ```tsx -import React, {PropTypes} from 'react' -import {injectIntl, FormattedDate} from 'react-intl' +import React, {PropTypes} from 'react'; +import {injectIntl, FormattedDate} from 'react-intl'; interface Props { - date: Date | number + date: Date | number; } const FunctionalComponent: React.FC = props => { const { date, intl, // Injected by `injectIntl` - } = props + } = props; return ( - ) -} + ); +}; -export default injectIntl(FunctionalComponent) +export default injectIntl(FunctionalComponent); ``` ## createIntl @@ -123,30 +123,30 @@ intl.formatNumber(20) ```ts interface IntlConfig { - locale: string - timeZone?: string - formats: CustomFormats - textComponent?: React.ComponentType | keyof React.ReactHTML - messages: Record | Record - defaultLocale: string - defaultFormats: CustomFormats - onError(err: string): void + locale: string; + timeZone?: string; + formats: CustomFormats; + textComponent?: React.ComponentType | keyof React.ReactHTML; + messages: Record | Record; + defaultLocale: string; + defaultFormats: CustomFormats; + onError(err: string): void; } interface IntlFormatters { - formatDate(value: number | Date, opts: FormatDateOptions): string - formatTime(value: number | Date, opts: FormatDateOptions): string + formatDate(value: number | Date, opts: FormatDateOptions): string; + formatTime(value: number | Date, opts: FormatDateOptions): string; formatRelativeTime( value: number, unit: Unit, opts: FormatRelativeOptions - ): string - formatNumber(value: number, opts: FormatNumberOptions): string - formatPlural(value: number, opts: FormatPluralOptions): string - formatMessage(descriptor: MessageDescriptor, values: any): string + ): string; + formatNumber(value: number, opts: FormatNumberOptions): string; + formatPlural(value: number, opts: FormatPluralOptions): string; + formatMessage(descriptor: MessageDescriptor, values: any): string; } -type IntlShape = IntlConfig & IntlFormatters +type IntlShape = IntlConfig & IntlFormatters; ``` This interface is exported by the `react-intl` package that can be used in conjunction with the [`injectIntl`](#injectintl) HOC factory function. @@ -186,7 +186,7 @@ A map of tag to rich text formatting function. This is meant to provide a centra function formatDate( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string. It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. @@ -196,7 +196,7 @@ intl.formatDate(Date.now(), { year: 'numeric', month: 'numeric', day: 'numeric', -}) +}); ``` ## formatTime @@ -205,7 +205,7 @@ intl.formatDate(Date.now(), { function formatTime( value: number | Date, options?: Intl.DateTimeFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted date string, but it differs from [`formatDate`](#formatdate) by having the following default options: @@ -220,7 +220,7 @@ This function will return a formatted date string, but it differs from [`formatD It expects a `value` which can be parsed as a date (i.e., `isFinite(new Date(value))`), and accepts `options` that conform to `DateTimeFormatOptions`. ```tsx live -intl.formatTime(Date.now()) // "4:03 PM" +intl.formatTime(Date.now()); // "4:03 PM" ``` ## formatRelativeTime @@ -236,30 +236,30 @@ type Unit = | 'week' | 'month' | 'quarter' - | 'year' + | 'year'; type RelativeTimeFormatOptions = { - numeric?: 'always' | 'auto' - style?: 'long' | 'short' | 'narrow' -} + numeric?: 'always' | 'auto'; + style?: 'long' | 'short' | 'narrow'; +}; function formatRelativeTime( value: number, unit: Unit, options?: Intl.RelativeTimeFormatOptions & { - format?: string + format?: string; } -): string +): string; ``` This function will return a formatted relative time string (e.g., "1 hour ago"). It expects a `value` which is a number, a `unit` and `options` that conform to `Intl.RelativeTimeFormatOptions`. ```tsx live -intl.formatRelativeTime(0) +intl.formatRelativeTime(0); ``` ```tsx live -intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}) +intl.formatRelativeTime(-24, 'hour', {style: 'narrow'}); ``` ## formatNumber @@ -270,13 +270,13 @@ This function uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/doc function formatNumber( value: number, options?: Intl.NumberFormatOptions & {format?: string} -): string +): string; ``` This function will return a formatted number string. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `NumberFormatOptions`. ```tsx live -intl.formatNumber(1000, {style: 'currency', currency: 'USD'}) +intl.formatNumber(1000, {style: 'currency', currency: 'USD'}); ``` **Formatting Number using `unit`** @@ -288,7 +288,7 @@ intl.formatNumber(1000, { style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow', -}) +}); ``` ```tsx live @@ -296,20 +296,20 @@ intl.formatNumber(1000, { unit: 'fahrenheit', unitDisplay: 'long', style: 'unit', -}) +}); ``` ## formatPlural ```ts type PluralFormatOptions = { - type?: 'cardinal' | 'ordinal' = 'cardinal' -} + type?: 'cardinal' | 'ordinal' = 'cardinal'; +}; function formatPlural( value: number, options?: Intl.PluralFormatOptions -): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other' +): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'; ``` This function will return a plural category string: `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, or `"other"`. It expects a `value` which can be parsed as a number, and accepts `options` that conform to `PluralFormatOptions`. @@ -317,15 +317,15 @@ This function will return a plural category string: `"zero"`, `"one"`, `"two"`, This is a low-level utility whose output could be provided to a `switch` statement to select a particular string to display. ```tsx live -intl.formatPlural(1) +intl.formatPlural(1); ``` ```tsx live -intl.formatPlural(3, {style: 'ordinal'}) +intl.formatPlural(3, {style: 'ordinal'}); ``` ```tsx live -intl.formatPlural(4, {style: 'ordinal'}) +intl.formatPlural(4, {style: 'ordinal'}); ``` :::danger multiple language support This function should only be used in apps that only need to support one language. If your app supports multiple languages use [`formatMessage`](#formatmessage) instead. ::: @@ -336,24 +336,24 @@ intl.formatPlural(4, {style: 'ordinal'}) ```ts type ListFormatOptions = { - type?: 'disjunction' | 'conjunction' | 'unit' - style?: 'long' | 'short' | 'narrow' -} + type?: 'disjunction' | 'conjunction' | 'unit'; + style?: 'long' | 'short' | 'narrow'; +}; function formatList( elements: (string | React.ReactNode)[], options?: Intl.ListFormatOptions -): string | React.ReactNode[] +): string | React.ReactNode[]; ``` This function allows you to join list of things together in an i18n-safe way. For example, when the locale is `en`: ```tsx live -intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}) +intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); ``` ```tsx live -intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) +intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}); ``` ## formatDisplayName @@ -362,36 +362,36 @@ intl.formatList(['5 hours', '3 minutes'], {type: 'unit'}) ```ts type FormatDisplayNameOptions = { - style?: 'narrow' | 'short' | 'long' - type?: 'language' | 'region' | 'script' | 'currency' - fallback?: 'code' | 'none' -} + style?: 'narrow' | 'short' | 'long'; + type?: 'language' | 'region' | 'script' | 'currency'; + fallback?: 'code' | 'none'; +}; function formatDisplayName( value: string | number | object, options?: FormatDisplayNameOptions -): string | undefined +): string | undefined; ``` Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}); ``` ```ts live // ISO-15924 four letters script code to localized display name -intl.formatDisplayName('Deva', {type: 'script'}) +intl.formatDisplayName('Deva', {type: 'script'}); ``` ```ts live // ISO-4217 currency code to localized display name -intl.formatDisplayName('CNY', {type: 'currency'}) +intl.formatDisplayName('CNY', {type: 'currency'}); ``` ```ts live // ISO-3166 two letters region code to localized display name -intl.formatDisplayName('UN', {type: 'region'}) +intl.formatDisplayName('UN', {type: 'region'}); ``` ## formatMessage @@ -428,10 +428,10 @@ React Intl has a Message Descriptor concept which is used to define your app's d ```tsx type MessageDescriptor = { - id: string - defaultMessage?: string - description?: string | object -} + id: string; + defaultMessage?: string; + description?: string | object; +}; ``` :::info Extracting Message Descriptor You can extract inline-declared messages from source files using [our CLI](http://localhost:3000/docs/getting-started/message-extraction). ::: @@ -451,18 +451,18 @@ Above, "source" refers to using the template as is, without any substitutions ma ### Usage ```ts -type MessageFormatPrimitiveValue = string | number | boolean | null | undefined +type MessageFormatPrimitiveValue = string | number | boolean | null | undefined; function formatMessage( descriptor: MessageDescriptor, values?: Record -): string +): string; function formatMessage( descriptor: MessageDescriptor, values?: Record< string, MessageFormatPrimitiveValue | React.ReactElement | FormatXMLElementFn > -): string | React.ReactNodeArray +): string | React.ReactNodeArray; ``` This function will return a formatted message string. It expects a `MessageDescriptor` with at least an `id` property, and accepts a shallow `values` object which are used to fill placeholders in the message. @@ -526,22 +526,22 @@ The message we defined using [`defineMessages`](#definemessages) to support extr ```ts interface MessageDescriptor { - id?: string - description?: string | object - defaultMessage?: string + id?: string; + description?: string | object; + defaultMessage?: string; } function defineMessages( messageDescriptors: Record -): Record +): Record; -function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor +function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor; ``` These functions is exported by the `react-intl` package and is simply a _hook_ for our CLI & babel/TS plugin to use when compiling default messages defined in JavaScript source files. This function simply returns the Message Descriptor map object that's passed-in. ```ts -import {defineMessages, defineMessage} from 'react-intl' +import {defineMessages, defineMessage} from 'react-intl'; const messages = defineMessages({ greeting: { @@ -549,11 +549,11 @@ const messages = defineMessages({ description: 'Message to greet the user.', defaultMessage: 'Hello, {name}!', }, -}) +}); const msg = defineMessage({ id: 'single', defaultMessage: 'single message', description: 'header', -}) +}); ``` diff --git a/website/docs/intl.md b/website/docs/intl.md index 8fee82d2a3..6c33dec7c7 100644 --- a/website/docs/intl.md +++ b/website/docs/intl.md @@ -352,7 +352,7 @@ function formatDisplayName( Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}) ``` ```ts live diff --git a/website/docs/react-intl/api.md b/website/docs/react-intl/api.md index 895f4bc337..7743b6953a 100644 --- a/website/docs/react-intl/api.md +++ b/website/docs/react-intl/api.md @@ -388,7 +388,7 @@ function formatDisplayName( Usage examples: ```ts live -intl.formatDisplayName('zh-Hans-SG') +intl.formatDisplayName('zh-Hans-SG', {type: 'language'}) ``` ```ts live