"What sets apart the usage of `import * as Button` from `import {Button}`

Question

"What sets apart the usage of `import * as Button` from `import {Button}`

As a newcomer to Typescript, I am facing an issue while trying to import a react-bootstrap Button.

In scenario 1:

import {Button} from 'react-bootstrap/lib/Button'

In scenario 2:

import * as Button from 'react-bootstrap/lib/Button'

Both methods do not result in any errors during the import statement, but encounter errors when trying to render the Button using

<Button bsClass="glyphicon glyphicon-new-window"></Button>

In scenario 1, there is no compile time error but it shows that Button is undefined

In scenario 2, Typescript displays the following compile time error

TS2604: JSX element type 'Button' does not have any construct or call signatures.

In contrast, the same operation works in JavaScript with

import Button from 'react-bootstrap/lib/Button'

. I am puzzled as to why none of the methods are working and what distinguishes these two approaches?

typescript react-bootstrap

Answer 1

Answer №1

Consider the following as the exports of a button.ts file:

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

Situation 1

When you use import { Button } from 'button', you will receive the Button function.

Situation 2

By using import * as Button from 'button', you will get an Object locally named Button with both Button and Toggle as members:

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

To learn more about module syntax, visit this link.

Since you specifically inquired about TypeScript, you may encounter issues related to why you cannot simply do import React from 'react' and must opt for the * as <x> syntax instead:

This change is influenced by TypeScript adhering to the ESModule specification. Formerly, Babel handled some behind-the-scenes actions for us developers, essentially providing interoperability between ESModules and CommonJS modules.

Imports like import React from 'react' attempt to fetch the default member in the react module. If the module is bundled with CJS, this member (usually) does not exist. Therefore, you need to employ * as React from 'react' to access the exported object containing createElement, PropTypes, and other elements.

Reference

Answer 2

Consider the following as the exports of a button.ts file:

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

Situation 1

When you use import { Button } from 'button', you will receive the Button function.

Situation 2

By using import * as Button from 'button', you will get an Object locally named Button with both Button and Toggle as members:

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

To learn more about module syntax, visit this link.

Since you specifically inquired about TypeScript, you may encounter issues related to why you cannot simply do import React from 'react' and must opt for the * as <x> syntax instead:

This change is influenced by TypeScript adhering to the ESModule specification. Formerly, Babel handled some behind-the-scenes actions for us developers, essentially providing interoperability between ESModules and CommonJS modules.

Imports like import React from 'react' attempt to fetch the default member in the react module. If the module is bundled with CJS, this member (usually) does not exist. Therefore, you need to employ * as React from 'react' to access the exported object containing createElement, PropTypes, and other elements.

Reference

Answer 3

Answer №2

The outcome varies depending on the type of object being exported from a specific module. To put it simply, let's assume module "a" exports some objects:

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

If we have:

import {Button} from 'a'

Then Button will represent

function() { //some button construction code}

In the case of:

import * as Button from 'a'

Button will contain the entire exported object:

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

For more in-depth information, please refer to the official documentation.

Answer 4

The outcome varies depending on the type of object being exported from a specific module. To put it simply, let's assume module "a" exports some objects:

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

If we have:

import {Button} from 'a'

Then Button will represent

function() { //some button construction code}

In the case of:

import * as Button from 'a'

Button will contain the entire exported object:

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

For more in-depth information, please refer to the official documentation.

"What sets apart the usage of `import * as Button` from `import {Button}`

Answer №1

Answer №2

Similar questions

Having trouble setting a default value for your Angular dropdown? Looking for alternative solutions that actually work?

Using TypeScript 4.1, React, and Material-UI, the className attribute does not support the CSSProperties type

Is the RouterModule exclusively necessary for route declarations?

Ensure that the hook component has completed updating before providing the value to the form

searchByTextContentUnderListItemAnchorTag

React's Redux persist is causing a duplication of requests being sent

Setting the default selected row to the first row in ag-Grid (Angular)

I am having trouble getting the guide for setting up a NextJS app with Typescript to function properly

Changing the button class during an event in Angular 4

The variable is accessed prior to being assigned with the use of the hasOwnProperty method

Checkbox in Angular FormGroup not triggering touched state

What is the best way to emphasize when the path matches exactly with '/'?

Passing asynchronous data from method1 to method2 without impacting the functionality of the script responsible for fetching the asynchronous data in method1

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

Tips for effectively managing TypeScript values with various types

Leverage tsconfig.json within the subfolders located in the app directory during Angular build or ng-build process

Leveraging the typeof Operator within a Class

Converting ts files to js: A comprehensive guide

What is the best way to display just one record that has the lowest score out of all the records?

A guide to implementing localStorage in TypeScript