Question

我有一个Icons文件夹，其中有很多Icons。

我正在尝试自动导出它们，但无法实现。

这是我的目录图

components
 ㅏ ...
 ㅏIcons
    ㅏ index.ts
    ㅏ IconA.tsx
    ㅏ IconB.tsx
    ㅏ ...
    ㅏ IconZ.tsx
 ㅏ ...

图标/index.ts

// I wanna avoid exporting components like this.
// export { IconA } from './IconA';

//below code doesn't work in Typescript.
const req = require.context('.', true, /\.\/.\.tsx$/)

req.keys().forEach((key: any) => {
  const componentName = key.replace(/\.\/.\.tsx$/, '$1')
  module.exports[componentName] = req(key).default
});

Icons / IconA.tsx

import React from 'react';

export const IconA = () => (<svg>...</svg>);

我想在其他组件中使用它

import { IconA, IconB, IconZ } from 'components/Icons'

Answer 1

我认为这里的问题是，因为您正在动态导入和重新导出，所以TypeScript无法猜测要导出的组件的类型，因为在编译时是未知的：您的导入只是文件在编译器的眼中。

如何使用脚本从每个图标文件生成index.ts文件到export { IconA } from './IconA';，这与您在此处执行的操作非常相似？然后，您可以将此脚本包含在构建过程中，并在打字稿编译器运行之前每次编译时都运行它

使用TS自动导出同一文件夹中的所有组件

1 个答案: