Typescript、index.d.ts和webpack：模块未找到错误

Question

我使用webpack创建了一个Typescript项目，遵循这个教程。 由于我有很多模块，所以我在src/components文件夹中添加了index.d.ts文件，其中我导出了所有的模块：

export {Module1} from "./Module1";
export {Module2} from "./Module2";
export {Module3} from "./Module3";

我将index.d.ts添加到了tsconfig.json文件中：

"files": [
    "./src/components/index.d.ts"
]

然后，在位于src文件夹中的index.tsx中，我导入：

import * as MyModule from "./components/";

代码提示正常工作，所以我想所有路径都没问题。但是当我运行webpack时，出现以下错误：

模块未找到：错误：无法解析目录'./components'

据我所知，webpack找不到这个index.d.ts文件。我尝试将d.ts添加到webpack.config.js扩展名中，就像这里所描述的，但是然后我就得到了另一个错误消息。我有什么遗漏吗？

- zeroin

Answer 1

对我来说，最终我将'./types'更改为'./types.d'。

所以一个类型导入看起来像这样：

import {
    TSomeType,
    ISomeInterface,
    ESomeEnum
} from 'src/types/components/SomeComponent/types.d'

替代,

import {
    TSomeType,
    ISomeInterface,
    ESomeEnum
} from 'src/types/components/SomeComponent/types'

取自此评论：

我可以确认这个问题，@Draccoz @filipesilva。

将文件名从.d.ts更改为.ts时，就不会出现此问题。 当您将导入从import { Something } from'yourlib';更改为import { Something } from'yourlib.d';时，也不会出现此问题。

我刚刚将一个工作中的项目从Webpack-Starter Seed（TypeScript / Angular）移动到CLI，并遇到了这个错误，因此我认为它与生成的CLI项目有关。

我正在使用@angular/cli：1.0.0-rc.2

---

我认为值得注意的是，tsx文件运行良好。 我只需要将types更改为types.d即可解决ts文件的问题。

- Mike K

Answer 2

提出了一种解决方案，即使用index.ts进行所有导出，而不是使用index.d.ts。

- zeroin

Answer 3

找到了一个非常简单的解决方案，效果非常好：

只需在import之后添加type即可。

import type { ISomeInterface } from 'src/types/components/SomeComponent/types'

- M Salman Ghazi