Setup a path mapping through ts-config

Introduction

Today, I want to show you the way to avoid these ugly paths on your typescript projects.

To something more readable, maintainable and fancier:

Path mapping

On Typescript project, we can use path mapping method through ts-config.json...

But, what does it mean “path mapping” on a Typescript project?

My ts-config.json would look like this:

{
  "compilerOptions": {
    "baseUrl": "src", // This must be specified if "paths" is.
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

The values inside paths property tell the transpiler: for any module import that matches the pattern "@/components/*" (* i.e. all values), to look in location "components/*".

So now with these instructions in my .tsx file, if I import a new component :

import Button from "@/components/Button";

When I compile, the transpiler knows where is this component in my project because during the build process the transpiler combines the baseUrl with components/* :

<baseUrl>/components/Button

You can see the Typescript documentation for information about this: TypeScript: Documentation - Module Resolution (typescriptlang.org)

tsconfig-paths

If for some reason, you are working with node.js or some environment that doesn't use a module bundler like webpack or parcel you will additionally need tsconfig-paths package.

This package will read the paths from tsconfig.json and convert node's module loading calls into physical file paths that node can load.

To do this, you need to preload tsconfig-paths/register in your node command :

node -r tsconfig-paths/register main.js

Jest

Jest is a little mischievous with paths-mapping of Typescript, you need to specify the module mapping to him. For example in your jest.config.js, you can set moduleNameMapper property:

module.exports = {
        moduleNameMapper: {
          "^@/(.*)$": "<rootDir>/src/$1"
        },
}

Conclusion

I hope you were enjoyed reading this article. It’s my first time, be indulgent with me please :D Also, I learn English, so don’t hesitate to notify me if I did mistakes.
You can follow me on my Github and my Portfolio (it’s under construction, but soon I will present it through a new article)

Comments

[Костя Третяк]

Good practice when you divide the imports in your code into those imported from node_modules and those imported from your local files.

import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';

import Card from '@components/Cards';
import { IProject } from '@models/project.model';

[yteruel31]

Thanks for your tip!