Question

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

import MyComponent from './MyComponent';

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

无法找到模块＆＃34; ./ MyComponent＆＃34;`

文件夹结构：

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，它会有效，但我认为main中package.json的目的是做我正在尝试的事情。谢谢！

Answer 1

main字段仅支持使用.js扩展名解析模块，types字段（类似于main的TypeScript）支持.d.ts字段。 TypeScript module resolution docs仅描述具有这些扩展名的用法。

这背后的原因是这些是用于已发布包的字段。 .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';

编辑：包括实际解决方案......

打字稿模块解析失败，尽管＆＃34; main＆＃34;在package.json中设置的属性

1 个答案: