"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

Using Typescript and React to render `<span>Text</span>` will only display the text content and not the actual HTML element

Typescript patterns for creating a modular library design

An exploration on integrating a controller into an Angular directive class using Typescript

Expanding the Mui Typescript breakpoints within a TypeScript environment

Looking to extract the expiration date from an x509 certificate?

The constant issue persists as the test continues to fail despite the component being unmounted from the

Failed to hit breakpoint in TypeScript file while working with Visual Studio 2019 and Webpack

Encountering compilation errors with TypeScript files in Angular 2 while using Visual Studio 2017

Tips for successfully sending an interface to a generic function

What is the best way to incorporate Typescript React Components across various projects?

A guide to mocking Prisma using Jest mock functionality

Exploring the Limitations of TypeScript Type Inference Using Recursive Typing

TSLint Alert: Excessive white space detected before 'from' keyword (import-spacing)

Transferring information from RSC to a nested child component using the Next.js application router

Having trouble passing a React Router Link component into the MuiLink within the theme

Exploring the power of combining React, styled-components, and TypeScript: Creating a functional component that encapsulates a styled component

What location is the optimal choice for documenting logs at a debugging level?

Error message in Typescript: When a class has initialized properties, a 'super' call must be the first statement in the constructor

Navigating through Expo with Router v3 tabs, incorporating stack navigation, search functionality, and showcasing prominent titles

The error code TS2554 is triggered when the function expects between 1 to 2 arguments, but receives