Skip to content

A ES6 module with with multiple exports including a default export #2440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tinganho opened this issue Mar 20, 2015 · 4 comments
Closed

A ES6 module with with multiple exports including a default export #2440

tinganho opened this issue Mar 20, 2015 · 4 comments
Labels
Question An issue which isn't directly actionable in code

Comments

@tinganho
Copy link
Contributor

I'm not sure if this is valid ES6 code but I'm trying to get this work:
app.ts

import function1, { function2 } from './module1'

function1()
function2()

module1.ts

export default function function1() {
  console.log('hej')
}

export function function2() {
  console.log('hej')
}

I'm using today's master branch and I get the following error when I compile app.ts:

error TS2309: An export assignment cannot be used in a module with other exported elements.

An another question, if app.ts do a namespaced import will I have access to the default function too?

app.ts

import * as module1 from './module1'

module1.function1()
module2.function2()
@JsonFreeman
Copy link
Contributor

For your first question, yes it is valid ES6 code. It gives an error in the compiler today, but we plan to change the design to allow that code, per #2242 (comment).

For your second question, no. An import * does not include the default export, so you will not have access to function1. However, you can access the default export via an explicit namespace import, like this:

import { default as function1, function2 } from './module1';

function1();
function2();

You can also combine the default import with *:

import function1, * as module1 from './module1';

function1();
module1.function2();

@ahejlsberg
Copy link
Member

I just posted #2460 which addresses this issue.

Regarding import * and default exports, keep in mind that a default export is simply an export with the reserved name default. So, when you import * from a module with a default export, the default export is available as a member named default.

Given your example above, you can import and use the module as follows:

import * as module1 from './module1'

module1.default();  // This calls function1
module2.function2();

If you want to export a member both by its name and as the default, you can do this:

export function function1() {
  console.log('hej')
}

export function function2() {
  console.log('hej')
}

export default function1;

Then you can do this:

import * as module1 from './module1'

module1.default();  // This calls function1
module1.function1();
module2.function2();

@ahejlsberg ahejlsberg added the Question An issue which isn't directly actionable in code label Mar 22, 2015
lumodon added a commit to lumodon/echo that referenced this issue Sep 14, 2017
@Worie
Copy link

Worie commented Mar 30, 2018

Hi, sorry for digging out an old thread. I've recently thought of moving into TS 2.8 and I cant seem to find a way to combine import into something like that:

import Types, { TypeA, TypeB } from '@/common/support/types';

I mean, importing * as Types and single types separately.

Would you mind giving me a tip on whats the valid syntax at this moment? Thanks!

@vaurelios
Copy link

@Worie i can't find either.

but with one more line i can do:

import * as React from 'react';

const { Component } = React;

@microsoft microsoft locked and limited conversation to collaborators Jul 25, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Question An issue which isn't directly actionable in code
Projects
None yet
Development

No branches or pull requests

5 participants