尽管在package.json中设置了“ main”属性，打字稿模块解析仍失败

Question

在下面的文件夹结构中，我想以App.tsx这种方式导入我的组件：

import MyComponent from './MyComponent';

尽管我的package.json文件main设置了属性，但Typescript会引发错误：

找不到模块“ ./MyComponent”`

资料夹结构：

src/
|- App.tsx
|- MyComponent/
|    |- MyComponent.tsx
|    |- package.json
|    |- ...

MyComponent.tsx：

export default class extends Component {
  ...
}

package.json：

{
  "name": "my-component",
  "version": "0.0.0",  
  "main": "MyComponent.tsx"
}

如果我更改MyComponent.tsx为index.tsx，则可以使用，但是我认为mainin
的目的package.json是完全按照我的意图进行。谢谢！

Answer 1

该main字段仅支持带有.js扩展名的解析模块，并且该types字段（与TypeScript类似main）支持.d.ts字段。该打字稿模块分辨率文档只描述了这些扩展用途。

其背后的原因是，这些是供发布的软件包使用的字段。.ts（或.tsx您的情况）文件是旨在转换为可用于生产环境的JavaScript的开发文件（以及辅助元数据文件）。如果已发布的包，甚至包括.ts文件（而不是他们造成.d.ts，.js和.js.map输出），试图要求这些文件将是非常不可取的。

在执行之前，您的TypeScript始终会转换为JS。编译器对TypeScript文件的简化包含的支持假定运行时之前还对这些包含进行了转译。

只要将您tsconfig.json配置为输出声明（和源映射）文件：

"compilerOptions": {
    "declaration": true,
    "sourceMap": true,
    ...

您可以将main和types字段指向输出文件：

"main": "myComponent.js",
"types: "myComponent.d.ts",

创建这些文件后，它们将正确解析。请注意，这意味着如果您使用任何编码帮助，通常意味着您必须重新编译才能获取更新的提示。

如果您需要自动代码协助，则index.tsx可能是更好的方法。如果您确实想避免连续编辑多个index.tsx文件，则可以让它们重新导出模块：

export * from '/MyComponent';

编辑：包括实际的解决方案…