Organize imports using Smart Import Visual Studio Code Extension — TypeScript — Angular, Reactjs, Vuejs, Nodejs
--
If you haven’t read the below story, do check it out. It explains in details about index.ts
file.
In any TypeScript based application like Angular, managing imports
is one of the tedious jobs. As the application grows, the number of individual TypeScript files grows proportionally. Especially the payload Models, helper Services, Pipes, State classes and so on.
The consumer of these types must import
using the relative path in order to use it. And that results into huge number of import
statement at the beginning of Component
and other files.
import { AddressService } from '../@services/address.service';
import { AppService } from '../@services/app.service';
import { AzureNotificationService } from '../@services/azure-notification.service';
import { DiscountService } from '../@services/discount.service';
import { OrdersService } from '../@services/orders.service';
import { PaymentService } from '../@services/payment.service';
import { ProductsService } from '../@services/products.service';
import { UsersService } from '../@services/users.service';
What we can do is to create index.ts
a file, inside services
the folder, that would have export
statements like below.
export * from './address.service';
export * from './orders.service';
export * from './discount.service';
export * from './payment.service';
export * from './users.service';
export * from './app.service';
export * from './auth.service';
export * from './products.service';
export * from './azure-notification.service';
The consumer would become a single import
statement.
import {
OrdersService,
PaymentService,
ProductsService,
AddressService,
AppService,
AzureNotificationService,
DiscountService,
UsersService
} from '../@services';
To automate this process, I have published a Visual Studio Code Extension called “Smart Imports”…