[英]Failing to "dynamically" import date-fns/locale libs - TypeScript giving an attempted import error
I have an app that receives a list of supported locales from the backend as a following response:我有一个应用程序从后端接收支持的语言环境列表作为以下响应:
{locales: [{code: 'enUS'}, {code: 'deDE'}, {code: 'arAR'}]}
I want to use date-fn library for handling date formatting but I have to import the whole date-fn/locale as I can't know beforehand which locale will be needed:我想使用 date-fn 库来处理日期格式,但我必须导入整个 date-fn/locale,因为我事先不知道需要哪个语言环境:
import * as dateFnsLocales from 'date-fns/locale';
The problem is, some of the locales are in different code format (for example, support for deutsch language is enabled when the backend response includes code: 'deDE', but the corresponding date-fns package is just 'de'. On the other hand date-fns package for english is 'enUS', not just 'en'.问题是,一些语言环境的代码格式不同(例如,当后端响应包含代码:'deDE' 时启用对德语的支持,但相应的 date-fns package 只是'de'。另一方面手日期-fns package 的英文是“enUS”,而不仅仅是“en”。
Easy solution imho would be to handle it with some coalescing operator.恕我直言,简单的解决方案是使用一些合并运算符来处理它。 The example is following:
示例如下:
import * as dateFnsLocales from 'date-fns/locale';
const supportedLocales = {locales: [{code: 'enUS'}, {code: 'deDE'}, {code: 'plPL'}]}
const newArrayWithSupportedLocales = supportedLocales.locales.map((locale) => ({
...locale,
dateFnsLocale: (dateFnsLocales[locale.code] || dateFnsLocales[locale.code.substring(0,2)]),
}));
Unfortunately I get the typescript error: No index signature with a parameter of type 'string' was found on type 'typeof import("date-fns/locale")'. TS7053
不幸的是,我收到 typescript 错误:
No index signature with a parameter of type 'string' was found on type 'typeof import("date-fns/locale")'. TS7053
No index signature with a parameter of type 'string' was found on type 'typeof import("date-fns/locale")'. TS7053
Even if I hardcode the attempt like so:即使我像这样对尝试进行硬编码:
dateFnsLocale: dateFnsLocales['plPL'.substring(0,2)]
it fails with the same error, even though this:它失败并出现相同的错误,即使这样:
dateFnsLocale: dateFnsLocales['pl']
works just fine.工作得很好。
Here's the code I am using for doing dynamic lookups using Expo's Localization
object.这是我使用 Expo 的
Localization
object 进行动态查找的代码。
import * as Localization from 'expo-localization';
import * as Locales from 'date-fns/locale';
import { Locale } from 'date-fns';
/**
* Looks up a date-fns locale from the Expo localization object. This falls back to `en-US`
* @param localization Expo Localization object containing the locale and region.
* @returns date-fns locale.
*/
export function getDateFnsLocale({ locale, region }: Pick<typeof Localization, 'locale'|'region'>) : Locale {
return (
Locales[locale.substring(0, 2) + region] ?? Locales[locale.substring(0, 2)] ?? Locales.enUS
);
}
Here's the test这是测试
import { enUS, fr, frCA } from 'date-fns/locale';
describe('date-fns locale lookup', () => {
it('shound find fr', () => {
expect(getDateFnsLocale({ locale: 'fr', region: null })).toBe(fr);
});
it('shound find fr-CA', () => {
expect(getDateFnsLocale({ locale: 'fr-CA', region: 'CA' })).toBe(frCA);
});
it('shound not find zz-ZZ', () => {
expect(getDateFnsLocale({ locale: 'zz-ZZ', region: 'ZZ' })).toBe(enUS);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.