違いは*ボタンおよびインポート{ボタン}

Question

ように私はTypescriptに新しいですし、私は

ケース1使用してreact-bootstrap Buttonをインポートしようとしている：import {Button} from 'react-bootstrap/lib/Button'

ケース2：import * as Button from 'react-bootstrap/lib/Button'

両方をインポートステートメントでエラーをスローしませんが、このボタンがレンダリングされたときにエラーがスローされます<Button bsClass="glyphicon glyphicon-new-window"></Button>

ケース1の場合、コンパイルエラーは発生しませんが、ケース2では

このJS import Button from 'react-bootstrap/lib/Button'に働くが活字体は、次のコンパイル時エラーTS2604: JSX element type 'Button' does not have any construct or call signatures.

をスロー。今は、どの方法がうまくいかないのか、2つの方法の違いは何かを理解できません。

Answer 1

のは、以下を言ってみましょうbutton.tsファイルの輸出されています

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

ケースimport { Button } from 'button'を使用して1

はあなたにButton機能を提供します。 ButtonとToggle：import * as Button from 'button'を使用して

のCas 2

はあなたのローカル二つの部材でButtonという名前Objectを与えるだろう。基本的には

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

あなたはモジュールの構文hereに関する詳細な情報を見つけることができます。

---

あなたが明示的に活字体について尋ねられたので、私はまた、あなたは、もはやimport React from ' react'を行い、代わりに* as <x>構文を使用することができ、なぜ問題が発生した可能性が推測：これが原因という事実によるものであり、

TypeScriptはESModule仕様に準拠しています。 Babel（以前）は、基本的にESModuleとCommonJSモジュール間の相互接続であった開発者のために、いくつかの魔法を発揮しました。

import React from 'react'のようなインポートでは、reactモジュールのデフォルトメンバーを取得しようとします。モジュールがCJSにバンドルされている場合、このメンバー（通常）は存在しません。したがって、createElement,PropTypesなどを含むエクスポートされたオブジェクトを取得するには、* as React from 'react'を使用する必要があります。

Source

Answer 2

特定のモジュールからどのオブジェクトがエクスポートされるかによって異なります。 簡単な言葉で。全体エクスポートされます

import * as Button from 'a' 

Buttonの場合function() { some button construction code}

になります

import {Button} from 'a' 

Buttonの場合

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

： "" いくつかのオブジェクトをエクスポートしたモジュールとしましょうオブジェクト：

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

詳細については、documentationを確認してください。