Typescript + Babel + Path Mappings

How to setup a typescript project using babel as transpiler (Path Mappings working in VSCODE, Jest and Webpack)

Yes, Typescript and Babel is a perfect marriage. They are powerfull tools and last year both 2 teams worked together and their efforts made possible the following workflow:

1. Typecheck with TSC;
2. Transpile with Babel;

And if you are using Webpack you can typechecking and transpile at same time thanks to fork-ts-checker-webpack-plugin and babel-loader

But...

I experienced some issues. Not big deal. But this one made me crazy.

Typescript + Babel + Path Mappings...

Typescript path mapping is a great way to make your code cleaner. Things like:

import { sum, multiply } from "../../../../../util/math";

becomes:

import { sum, multiply } from "@util/math";

much better 😃

But it seems that @babel/preset-typescript still don't know how to deal with this typescript feature.

Today (July 2019) you can deal with this issue by adding and configuring the babel-plugin-module-resolver plugin to your project. And.. that's it! you are in the game again.

Check these files to know how to proppelly configure your Typescript + Babel (plus path mappings) project

• jest.config.js
• tsconfig.json
• .babelrc

Scripts

• npm run check-types check your code against tsconfig rules
• npm test test your code with Jest
• npm run build build your project with webpack. It wont emit TS definitions
• npm run build:types Emit TS definitions