导入* as Button与import {Button}之间的差异

Question

我是Typescript新手，我正在尝试使用

案例1：import {Button} from 'react-bootstrap/lib/Button'

案例2：import * as Button from 'react-bootstrap/lib/Button'

这两种方法都不会在导入语句上抛出任何错误，而是在使用<Button bsClass="glyphicon glyphicon-new-window"></Button>呈现此按钮时抛出错误

在案例1中，没有编译时错误，只有Button is undefined。

在第2种情况下，类型记录引发以下编译时错误TS2604: JSX element type 'Button' does not have any construct or call signatures.

虽然这在JS import Button from 'react-bootstrap/lib/Button'中有效。现在我无法弄清楚为什么任何一种方法不起作用，这两种方法之间有什么区别呢？

Answer 1

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

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

案例1

使用import { Button } from 'button'将为您提供Button函数。

Cas 2

使用import * as Button from 'button'将为您提供一个本地名为Button的Object，它有两个成员：Button和Toggle。基本上

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

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

由于您显式地询问了TypeScript，我想您可能还会遇到一个问题，为什么您不再能够执行import React from ' react'，而不得不使用* as <x>语法：

这是因为TypeScript遵守ESModule规范。Babel (以前)为我们开发人员做了一些魔术，这基本上是ESModules和CommonJS模块之间的互操作。

像import React from 'react'这样的导入将尝试获取react模块中的默认成员。如果模块与CJS捆绑在一起，则该成员(通常)不存在。因此，您必须使用* as React from 'react'来获取包含createElement、PropTypes等的导出对象。 来源

Answer 2

这取决于从特定模块导出的对象类型。用一个简单的词。让我们说模块"a“导出了一些对象：

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

如果

import {Button} from 'a'

Button将是function() { some button construction code}

如果

import * as Button from 'a'

Button将是整个导出对象：

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

有关更多细节，您可以查看文档。