DEV Community

loading...

How to improve imports in your code

tsuyan
Hi ! I am Rafael, 15 years old and I am a student of web and mobile development ! I am here to practice my english writing articles and share things I am learning!
・1 min read

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

Discussion (11)

Collapse
ats1999 profile image
Rahul kumar

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

Collapse
tsuyusk profile image
tsuyan Author

With tsconfig paths ?

Collapse
retr0c0de 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
tsuyan Author

thaaanks

Collapse
ats1999 profile image
Rahul kumar

Learn on your own!

Thread Thread
retr0c0de 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
retr0c0de profile image
Anguram Shanmugam

neat & clean 🤓

Collapse
erasmuswill profile image
Wilhelm Erasmus

How does this affect treeshaking though?