CODEWITHSUNDEEP
typescript
monnef
monnef

Reputation: 4053

How to combine import all with others?

I am getting from TSLint:

Multiple imports from 'moment' can be combined into one.

Guilty code:

import * as moment from 'moment';
import { Moment } from 'moment';

I have tried several variants without success (I have not found relevant example in docs):

import * as moment, { Moment } from 'moment';
import { * as moment, Moment } from 'moment';
import { * as moment, Moment as Moment } from 'moment';

Upvotes: 34

Views: 12834

Answers (5)

esengineer
esengineer

Reputation: 9918

The below doesn't always work. It all depends if someModule has default export defined. If yes, then it will work.

import someModule, { someMember } from 'someModule';

The module I was referencing has no default defined, so I went with the following approach:

import * as someModule from 'someModule';
// To avoid multiple imports from the same module, destruct the exported members from the module.
const { someMember } = someModule;

Upvotes: 8

Taras
Taras

Reputation: 180

Be careful because:

import * as moment from 'moment'

is different from

import moment from 'moment'

Because the second imports only the namespace moment and everything within, but the first imports everything including function moment() that is out of the namespace. Correct import can be:

import * as moment from 'moment';
type Moment = moment.Moment;

Upvotes: 18

Knut Holm
Knut Holm

Reputation: 4162

If you use an asterisk in import then you can access everything from the imported module by the name given as for the asterisk.

In this particular example:

import * as moment from 'moment';

You don't need to import { Moment } as well because you can simply access Moment by moment.Moment in your code.

Note

You can't combine asterisk import with any other import and yes, in this particular case the TSLint message is a little bit misleading.

EDIT

As I wrote in my first comment, this ES6 way should work as well and it really works:

import moment, { Moment } from 'moment';

It was added into TS in version 1.8 (see release notes).

Module loaders like SystemJS wrap CommonJS modules and expose then as a default ES6 import. This makes it impossible to share the definition files between the SystemJS and CommonJS implementation of the module as the module shape looks different based on the loader.

Setting the new compiler flag --allowSyntheticDefaultImports indicates that the module loader performs some kind of synthetic default import member creation not indicated in the imported .ts or .d.ts. The compiler will infer the existence of a default export that has the shape of the entire module itself.

System modules have this flag on by default.

Upvotes: 12

gilamran
gilamran

Reputation: 7294

You just do this:

import moment, {Moment} from 'moment';

In the tsconfig.json you should have allowSyntheticDefaultImports set to true as of Typescript 1.8 (it's true by default).

Upvotes: 0

Spitzbueb
Spitzbueb

Reputation: 5871

In Typescript you can export multiple functions, classes and variables from one file. In most cases you just want some particular thing of an import like:

import { Component } from "@angular/core";

Moment is built a little bit different so you usually import it like this:

import * as moment from "moment";

This can also be used in the angular import: 

import * as AngularCore from "@angular/core";

@AngularCore.Component({
    //...

It's the same technique. In the second way you just assign ALL exports to a variable called AngularCore (or moment). This is now like a wrapper. You can imagine it like a Javascript object:

var AngularCore = {
    Component: // the component things....
    OnInit: // the OnInit interface...
}

little fancy paint grahpic

Here you can see more or less how it works. (Sorry for the bad paint skills :/ )

The variable (in the example moment) can have any name you like.

I hope you can understand this. If not just ask.

Upvotes: 1

Related Questions