import * as Button 和 import {Button} 的区别 [英] Difference between import * as Button and import {Button}

问题描述

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

I am new to Typescript and I'm trying to import a react-bootstrap Button using

case 1: import {Button} from 'react-bootstrap/lib/Button'

case 2: import * as Button from 'react-bootstrap/lib/Button'

这两种方式都不会在 import 语句上抛出任何错误，但在使用 <Button bsClass="glyphicon glyphicon-new-window"></Button>

Both the ways dont throw any error on import statement but throws error when this Button is rendered using <Button bsClass="glyphicon glyphicon-new-window"></Button>

情况 1 没有编译时错误但 Button 未定义

In case 1 there is no compile time error but Button is undefined

如果 2 Typescript 抛出以下编译时错误 TS2604:JSX 元素类型 'Button' 没有任何构造或调用签名.

In case 2 Typescript throws the following compile time error TS2604: JSX element type 'Button' does not have any construct or call signatures.

虽然这适用于 JS import Button from 'react-bootstrap/lib/Button'.现在我无法弄清楚为什么任何方法都不起作用，这两种方法之间有什么区别?

Although this works in JS import Button from 'react-bootstrap/lib/Button'. Now I'm not able to figure out why any of the method aint working and what is the difference between the two methods?

推荐答案

假设下面是一个 button.ts 文件的导出:

Let's say the below are the exports of a button.ts file:

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

案例 1

使用 import { Button } from 'button' 会给你 Button 功能.

Using import { Button } from 'button' will give you the Button function.

Cas 2

使用 import * as Button from 'button' 会给你一个 Object 本地命名为 Button 有两个成员:Button 和 Toggle.基本上

Using import * as Button from 'button' will give you an Object locally named Button with two members: Button and Toggle. Basically

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

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

You can find more information about the module syntax here.

既然你明确询问了 TypeScript，我想你也可能会遇到为什么你不能再执行 import React from 'react' 而必须使用 * 作为 < 的问题;x> 语法:

Since you explicitly asked about TypeScript, I guess you also might run into the issue why you no longer can do import React from ' react' and instead have to use the * as <x> syntax:

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

This is due to the fact that TypeScript adheres the ESModule specification. Babel (previously) did some magic under the hood for us developers that basically was an interop between ESModules and CommonJS modules.

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

Imports like import React from 'react' will try to pick up the default member in the react module. If the module is bundled with CJS this member (usually) doesn’t exist. Thus, you have to use * as React from 'react' in order to obtain the exported object containing createElement, PropTypes and so on.

来源

这篇关于import * as Button 和 import {Button} 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！