DEV Community

Rafael Sant'Ana
Rafael Sant'Ana

Posted on

How to improve imports in your code

Hello, there!

After a while without new posts, I decided to come back with a really useful tip to simplify your code and reduce repetition.

Have you ever saw a code like this ?
many_imports
Wouldn't It be great if we could simply shorten it to this ?
simplified_imports

Well, It's possible!

In order to do it, we will simply create a file named 'index.(js/ts)' inside components' folder, and add the following code in it:

exports_index_ts

And now you can import components easier from other files without needing to repeat their names.


If you think that it is still not worth it, because in index.(js/ts) the components are still being imported, there is another solution:

Instead of default exporting components

export default Input
Enter fullscreen mode Exit fullscreen mode

Simply export them without default keyword

export const Input (...)
Enter fullscreen mode Exit fullscreen mode

And in index.(js/ts) do this:

second_way_to_simplify

Top comments (11)

Collapse
 
ats1999 profile image
Rahul kumar

You can do much better, read more about jsconfig and tsconfig

Collapse
 
tsuyusk profile image
Rafael Sant'Ana

With tsconfig paths ?

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

you can use decorators also you need to import files in your index.{js,ts}

watch this: youtube.com/shorts/WpgZKBtW_t8?fea...

Thread Thread
 
tsuyusk profile image
Rafael Sant'Ana

thaaanks

Collapse
 
ats1999 profile image
Rahul kumar

Learn on your own!

Thread Thread
 
heyprotagonist profile image
Anguram Shanmugam

oh c'mon 😂

Is Dev.to your app to say a comment like this ¯\(ツ)/¯

Thread Thread
 
ats1999 profile image
Rahul kumar

Be little bit more clear ¯\(ツ)/¯

Collapse
 
mfurkankaya profile image
Furkan KAYA

You can shorten the path with that, but this is not about that.

Collapse
 
hamodey85 profile image
Mohammed Almajid • Edited

You can make it much better

I use Typescript all the time and in my tsconfig I set my paths

        "paths": {

            "@core/*": ["src/core/*"],
            "@types/*": ["src/core/types/*"],
            "@config/*": ["src/core/config/*"],
            "@models/*": ["src/models/*"],
            "@middleware/*": ["src/middleware/*"],
            "@controllers/*": ["src/controllers/*"]
        }
Enter fullscreen mode Exit fullscreen mode

but in my application i have to use tsconfig-paths package

so if i want to import files from controllers i do

import { something} from "@controllers/"
Enter fullscreen mode Exit fullscreen mode

resources
npmjs.com/package/tsconfig-paths
typescriptlang.org/docs/handbook/m...
stackoverflow.com/questions/432817...

correct me if I missed something

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

neat & clean 🤓

Collapse
 
erasmuswill profile image
Wilhelm Erasmus

How does this affect treeshaking though?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.