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 ?

Wouldn't It be great if we could simply shorten it to this ?

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:

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

Simply export them without default keyword

export const Input (...)

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

Comments

[Rahul kumar]

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

[Rafael Sant'Ana]

With tsconfig paths ?

[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...

[Rafael Sant'Ana]

thaaanks

[Rahul kumar]

Learn on your own!

[Anguram Shanmugam]

oh c'mon 😂

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

[Rahul kumar]

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

[Furkan KAYA]

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

[Mohammed Almajid]

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/*"]
        }

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/"

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

correct me if I missed something

[Anguram Shanmugam]

neat & clean 🤓

[Wilhelm Erasmus]

How does this affect treeshaking though?