Hampus Hampus - 21 days ago 11
TypeScript Question

WebStorm to import from index file when using SystemJS module system

Suppose I have the following source structure.

/home
home.component.ts
/shared
/domain
car.domain.ts
house.domain.ts
person.domain.ts
index.ts


All the domain files contains something like

export interface Car {
someProperty: number;
}


The index file looks like this

export * from './car.domain';
export * from './house.domain';
export * from './person.domain';


Then in works perfectly fine to import like this in my home component.

import { Car, Person } from '../shared/domain';


or

import { Car, Person } from '../shared/domain/index';


But when auto-importing WebStorm insists on importing the interfaces like this

import { Car } from '../shared/domain/car.domain';
import { Person } from '../shared/domain/person.domain';


Is there any way to have WebStorm to prefer to import from the index file?

Answer

You need to open File | Settings | Editor | General | Auto Import settings and enable the option [Use directory import]

Note: requires WebStorm 2016.3 or higher

enter image description here