Question

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

导入react-bootstrap Button

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

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

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

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

如果2个Typescript抛出以下编译时错误TS2604: JSX element type 'Button' does not have any construct or call signatures.

虽然这适用于JS import Button from 'react-bootstrap/lib/Button'。现在我无法弄清楚为什么任何方法不起作用以及这两种方法有什么区别？

Answer 1

我们假设以下是export function Button () {} export function Toggle () {}文件的导出：

import { Button } from 'button'

案例1

使用Button会为您提供import * as Button from 'button'功能。

Cas 2

使用Object会为您提供Button本地名称Button，其中包含两名成员：Toggle和const Button = { Button:Button, Toggle:Toggle }。基本上

import React from ' react'

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

由于您明确询问了TypeScript，我想您也可能遇到问题，为什么您不能再执行* as <x>而必须使用import React from 'react'语法：

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

react等导入将尝试在* as React from 'react'模块中选择默认成员。如果模块与CJS捆绑在一起，则该成员（通常）不存在。因此，您必须使用createElement才能获取包含PropTypes，final CharSequence[] options = {"Images", "Videos", "Cancel"}; AlertDialog.Builder builder = new AlertDialog.Builder(OpenGallery.this); builder.setTitle("Select From..."); builder.setItems(options, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int item) { if (options[item].equals("Images")) { Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); startActivityForResult(intent, 1); } else if (options[item].equals("Videos")) { Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Video.Media.EXTERNAL_CONTENT_URI); intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); startActivityForResult(intent, 1); } else if (options[item].equals("Cancel")) { dialog.dismiss(); } dialog.dismiss(); } }); builder.show();等的导出对象。

Source

Answer 2

这取决于从特定模块导出的对象类型。用简单的话说。让我们说模块＆＃34; a＆＃34;导出了一些对象：

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: {}
    }

有关详细信息，请查看documentation。

import * as Button和import {Button}之间的区别

2 个答案: