what is the difference about import import {} import * as in typescript

Issue

when I write code using typescript, sometimes import module using type 1:

import foo from bar;

sometimes import using type 2:

import {foo} from bar;

sometimes import using type 3:

import * as foo from bar;

what is the difference? when should using type 1,2,3?

Solution

import foo from bar;

works when in bar you do

export default .... // when exporting, there is no restriction about naming. You can `export default foo` but `import bar from bar`

import { foo } from bar; // this is more restriced, and you need to precisely import the same name as you export 

works when you do

export const foo .....

And regarding

import * as foo from bar

It basically takes everything that is exported from bar and allows you to use it like this:

import * as foo from bar


foo.bar
foo.somethingElse

// bar

export const bar = ...
export const somethingElse...

Answered By - ldruskis