Use typescript aliases to clean up your import statements

source: MSPaint

We can create prettier imports by defining the paths and baseUrl properties in the compilerOptions section in thetsconfig.json file.

Given the below code, we could refactor into one import statement, and clean up the ../../../ in the process.

First, we will change our tsconfig.json to the following:

Now we will be able to re-factor the imports into the following:

We could also have used barrels to rewrite the import statement into one line of code.

The major benefit of this comes into play when we need to refactor our components. When we move components around it can create more folders, and therefore create more ../../../ , but if we use aliases and barrels we wont have to update the import statements.

Reference: https://github.com/labs42io/clean-code-typescript#use-typescript-aliases