如何使 react-intl-formatted-duration 在打字稿项目中工作？

问题描述

我在 react (17.0.1) typescript (3.9.7) 项目中使用 react-intl (5.10.6)，这是更大项目中的纱线工作区。我的子项目（纱线工作区）是一个组件库，我在开发它们时使用故事书 (6.1.17) 查看这些组件。开箱即用的 react-intl 附带的所有内容都可以正常工作，因为它具有类型定义。我还需要显示持续时间，所以我添加了 react-intl-formatted-duration (4.0.0)。这不带有 .d.ts 文件，因此当我尝试 import { FormattedDuration } from 'react-intl-formatted-duration' Visual Studio 代码时说：

找不到模块“react-intl-formatted-duration”的声明文件。 'c:/Users/mira/git/alarmwatch-web-ui/node_modules/react-intl-formatted-duration/dist/bundle.js' 隐式具有 'any' 类型。 尝试 npm i --save-dev @types/react-intl-formatted-duration（如果存在）或添加包含 declare module 'react-intl-formatted-duration';

的新声明 (.d.ts) 文件

@types/react-intl-formatted-duration 不存在，因此我在项目的 Typings.d.ts 文件末尾添加了以下内容：

declare module 'react-intl-formatted-duration' {
 const FormattedDuration: React.FC<{
   seconds: number;
 }>;
 export { DurationMessage };
}

Visual Studio 代码停止抱怨，但是当我运行 yarn storybook 时，我的故事没有出现，并且我在控制台中收到警告：

WARNING in ./src/helpers/drillDownHelpers.tsx 43:32-47
"export 'FormattedDuration' was not found in 'react-intl-formatted-duration'
 @ ./src/stories/DrillDownTable.stories.tsx
 @ ./src sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ../node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ../node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ../node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ../node_module/dist/preset/addArgs.js-generated-other-entry.js ../node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ../node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

我查看了代码本身，发现文档中没有 FormattedDuration 组件，而是定义的最接近的内容是 DurationMessage。我使用 DurationMessage 尝试了相同的步骤，但得到了相同的错误和警告。我如何定义类型，以便故事书将呈现故事而不是由于无法找到导出而跳过它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）