CODEWITHSUNDEEP
typescriptimport
Ondra Žižka
Ondra Žižka

Reputation: 46796

TypeScript - difference between import ... and import {...} (with curly braces)

Coming from Java to TS, I've omitted the {...} around the imported type. 

import DiscriminatorMappingData from './DiscriminatorMappingData';

instead of 

import {DiscriminatorMappingData} from './DiscriminatorMappingData';

See TypeScript - storing a class as a map value?.

I've read the documentation and didn't understand much. I only took from it that when I only need one type from a file, I can omit the {}.
However, that caused weird errors, like "Unknown name", or unexpected type incompatibilites.

So, what's the difference, put simply?

Upvotes: 94

Views: 25933

Answers (3)

Michael Liu
Michael Liu

Reputation: 55369

The difference between your two import declarations is covered in the TypeScript specification. From §11.3.2, Import Declarations:

An import declaration of the form

import d from "mod";

is exactly equivalent to the import declaration

import { default as d } from "mod";

Thus, you would omit the braces only when you are importing something that was exported as the default entity of the module (with an export default declaration, of which there can only be one per module). The name you provide in the import declaration becomes an alias for that imported entity.

When importing anything else, even if it's just one entity, you need to provide the braces.

Upvotes: 105

Yogesh Umesh Vaity
Yogesh Umesh Vaity

Reputation: 48129

The default import needs to be without curly braces. It's easy to understand with the following example of the calculator functions.

// Calculator.ts

export default function plus() { }    // Default export 

export function minus() { }           // Named export

export function multiply() { }        // Named export

Default Import: No Curly Braces

// CalculatorTest.ts

import plus from "./Calculator"

The plus should not be enclosed with the curly braces because it is exported using the default keyword.

Named Import: With Curly Braces

// CalculatorTest.ts

import plus, { minus, multiply } from "./Calculator"

The minus and multiply should be inside the curly braces because they are exported using only the export keyword. Note that the plus is outside of the curly braces.

Alias for Default Import

If you want an alias for the default import, you can do it with/without curly braces:

// CalculatorTest.ts

import { default as add, minus, multiply } from "./Calculator"

OR

// CalculatorTest.ts

import add, { minus, multiply} from './Calculator'

Now the plus() function becomes add(). This works because only one default export is allowed per module.

That's it! Hope that helps.

Upvotes: 37

dimitrisli
dimitrisli

Reputation: 21391

This is imports in destructruring format. Essentially grouping all the entities that we want to be imported from a definition file.

If you are familiar with other programming languages you might be familiar with the destructuring notion. Actually destructuring was added in the form of assignments as part of es6.

Import restructuring support was first suggested in TypeScript in this Github ticket but then got grouped under this ticket that was tracking all the es6 modules.

Upvotes: 5

Related Questions