DEV Community

Cover image for Setup a path mapping through ts-config

Posted on • Updated on

Setup a path mapping through ts-config


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/*"]
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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/* :

Enter fullscreen mode Exit fullscreen mode

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


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
Enter fullscreen mode Exit fullscreen mode


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"
Enter fullscreen mode Exit fullscreen mode


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)

Discussion (2)

kostyatretyak profile image
Костя Третяк

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';
Enter fullscreen mode Exit fullscreen mode
yteruel31 profile image
yteruel31 Author

Thanks for your tip!