Typescript 导入*as按钮和导入{Button}之间的差异

我不熟悉

Typescript

，正在尝试使用导入

react引导按钮

案例1：

从'react bootstrap/lib/Button'导入{Button}

案例2：

import*as按钮来自“react bootstrap/lib/Button”

这两种方法都不会在import语句中抛出任何错误，但在使用

呈现此按钮时抛出错误

在案例1中，没有编译时错误，但

按钮未定义

在案例2中，Typescript抛出以下编译时错误

TS2604:JSX元素类型“Button”没有任何构造或调用签名。

---

尽管这在JS

导入按钮“react bootstrap/lib/Button”

中有效。现在我无法理解为什么任何一种方法都不起作用，以及这两种方法之间的区别是什么？

这取决于从特定模块导出什么类型的对象。 简单地说。假设模块“a”导出了一些对象：

export {
    Button: function() { some button construction code},
    Link: {}
}

万一

import {Button} from 'a'

import * as Button from 'a'

按钮

将是

function（）{some Button construction code}

万一

import {Button} from 'a'

import * as Button from 'a'

按钮

将是整个导出对象：

    {
        Button: function() {},
        Link: {}
    }

---

有关更多详细信息，您可以查看。

这取决于从特定模块导出的对象类型。 简单地说。假设模块“a”导出了一些对象：

export {
    Button: function() { some button construction code},
    Link: {}
}

万一

import {Button} from 'a'

import * as Button from 'a'

按钮

将是

function（）{some Button construction code}

万一

import {Button} from 'a'

import * as Button from 'a'

按钮

将是整个导出对象：

    {
        Button: function() {},
        Link: {}
    }

---

有关更多详细信息，请查看。

假设下面是

按钮.ts

文件的导出：

export function Button () {}
export function Toggle () {}

案例1

使用“按钮”中的

import{Button}

将为您提供

按钮

功能

Cas 2

使用“按钮”中的

import*as按钮

将为您提供一个本地命名的

对象
按钮
，该按钮有两个成员：
按钮
和
切换
。基本上

const Button = { Button:Button, Toggle:Toggle }

您可以找到有关模块语法的更多信息


由于您明确询问了TypeScript，我想您也可能会遇到这样的问题：为什么不再可以从“React”

导入React，而必须使用

*作为

语法：

这是因为TypeScript遵循ESModule规范。Babel（以前）为美国开发人员创造了一些奇迹，基本上是ESModules和CommonJS模块之间的互操作

从'React'导入类似的

import React将尝试在
React
模块中拾取默认成员。如果模块与CJS捆绑在一起，则该成员（通常）不存在。因此，为了获得包含
createElement
、
PropTypes
等内容的导出对象，您必须使用
*作为“React from”React from


假设下面是
按钮.ts
文件的导出：

export function Button () {}
export function Toggle () {}

案例1

使用“按钮”中的
import{Button}
将为您提供
按钮
功能

Cas 2

使用“按钮”中的
import*as按钮
将为您提供一个本地命名的
对象
按钮
，该按钮有两个成员：
按钮
和
切换
。基本上

const Button = { Button:Button, Toggle:Toggle }

您可以找到有关模块语法的更多信息


由于您明确询问了TypeScript，我想您也可能会遇到这样的问题：为什么不再可以从“React”
导入React，而必须使用
*作为
语法：

这是因为TypeScript遵循ESModule规范。Babel（以前）为美国开发人员创造了一些奇迹，基本上是ESModules和CommonJS模块之间的互操作

从'React'

导入类似的

import React将尝试在
React
模块中拾取默认成员。如果模块与CJS捆绑在一起，则该成员（通常）不存在。因此，为了获得包含
createElement
、
PropTypes
等内容的导出对象，您必须使用
*作为“React from”React from


实际上，你确定这是正确的（你的第一个案例）？@torazaburo我在我的代码中使用它：导出名称空间（确实是对象），导入单个变量（“从“/view model”；”导入{viewModelsMap}）。实际上，你确定这是正确的（你的第一个案例）？@torazaburo我在我的代码中使用它：导出名称空间（确实是对象），导入单个变量（“从“/view model”；”导入{viewModelsMap}）