Reactjs React TypeScript-导出多个组件

给定此文件夹结构：

├──components/
|  └─Elements/
|    └─Button/
|    └─Input/
|    └─index.ts
|  └─Home/
|    └─home.tsx

我想导出

按钮

和

输入

，这样我就可以通过执行以下操作从主组件访问它们：

home.tsx

import { Button, Input } from '@elements/'

我试过这个：

index.ts（在Elements文件夹中）

但它不起作用，我得到：

找不到模块'@elements/'或其相应的类型声明。

即使解析别名也能起作用

tsconfig.json

{
  "compilerOptions": {
    "outDir": "../public",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "baseUrl": "./",
    "rootDir": "./",
    "typeRoots": ["./node_modules/@types", "./src/@types"],
    "paths": {
      "@src/*": ["src/*"],
      "@images/*": ["src/images/*"],
      "@styles/*": ["src/styles/*"],
      "@components/*": ["src/components/*"],
      "@elements/*": ["src/components/Elements/*"],
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importsNotUsedAsValues": "preserve"
  },
  "exclude": ["node_modules", "webpack"]
}

webpack.config.babel.js

...
resolve: {
  alias: [
    '@src': join(rootDir, '/src'),
    '@images': join(rootDir, '/src/images'),
    '@assets': join(rootDir, '/src/assets'),
    '@styles': join(rootDir, '/src/styles'),
    '@components': join(rootDir, '/src/components'),
    '@elements': join(rootDir, '/src/components/Elements')
  ]
  extensions: ['.tsx', '.ts', '.js', '.jsx']
},

---

Typescript中的模块解析是编译器用来确定导入所指内容的过程。您可以在中阅读有关

模块分辨率的更多信息

这种类型的导入称为
相对导入
。相对导入是以/、/或../开头的导入

任何其他进口都被视为非相对进口。一些例子包括：

import * as $ from "jquery";
import { Component } from "@angular/core";


typescript中有两种模块解析策略，即
节点
和
经典
。默认情况下，模块分辨率设置为
classic

将模块分辨率设置为
节点
将解决您的问题

"moduleResoution": "node"

注意：节点模块解析是TypeScript社区中最常用的，建议用于大多数项目。如果在TypeScript中导入和导出时遇到解决问题，请尝试设置
moduleResolution:“node”
，以查看是否解决了该问题

我发现解决方案是从
tsconfig.json上的
path
声明中删除
*

这个

而不是这个

"@elements/*": ["src/components/Elements/*"]

然后使用

import { Button, Input } from '@elements/'

或

应该是

export { Button } from './Button/button';
export { Input } from './Input/input';

如果它们是默认导出，则必须执行此操作

export { default as Button } from './Button/button';
export { default as Input } from './Input/input';

@elements alias可以工作如果我导入一个组件，请看，是的，它与此有关，我将其更改为
。/elements
，现在它works@T.JCrowder，在类型脚本“路径”中：{“@elements/*”：[“src/components/elements/*”]}，在网页包中解析：{别名：'@elements'：join（rootDir，'/src/components/elements'）…@T.J Crowder，我不明白为什么它不能与@elements一起工作，如果我从'@elements/Button'
导入一个带有
import{Button}的组件，我会通过执行“@elements/*”：[“src/components/elements/”]，基本上从路径设置
“moduleResolution:“node”中删除*来修复它
tsconfig.json中的
没有为我解决这个问题。@Subro，谢谢你的回复，我已经在我的
tsconfig
上有了
模块解决方案“：“node”
，但是如果我导入一个组件，它可以工作，但不能与两个组件一起工作，你让它与@elements和两个组件一起工作了吗？@lvaro-（如果这是对我说的话的回应，即使在我未删除的评论中有一个组件，我也无法让它工作。）不，我不能让它与一个组件、两个组件等一起工作。我想我只是缺少了一些东西，不过，TS配置不是我的强项。这对我也很有效。因为在目标中显示了那些
*
，我建议提高一个。@Alvaro这正确吗
“@src/*”：[“src*”，
？我的意思是应该是
[“src/*”]
？Subro，你是对的，我从未真正使用过@src别名，但它是错误的。我编辑了答案以解决这个问题。哦，这也行。我会使用第二种方法。顺便说一句，配置文件不错。是的，看起来好多了，谢谢
import { Button, Input } from '@elements/'

"@elements": ["src/components/Elements"]

import { Button, Input } from '@elements'

import { Button } from './Button/button';
import { Input } from './Input/input';

export { Button } from './Button/button';
export { Input } from './Input/input';

export { default as Button } from './Button/button';
export { default as Input } from './Input/input';