DEV Community

Cover image for Setup a path mapping through ts-config
yteruel31
yteruel31

Posted on • Updated on

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.

setup_path_mapping_1.png

To something more readable, maintainable and fancier:

setup_path_mapping_2.png

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

<baseUrl>/components/Button
Enter fullscreen mode Exit fullscreen mode

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

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

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)

Top comments (2)

Collapse
 
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
Collapse
 
yteruel31 profile image
yteruel31

Thanks for your tip!