Babel Module Resolver with TypeScript

Here you will learn how to use TypeScript with Babel Module Resolver for aliases that are defined in your .babelrc file:

javascript

{
  ...
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./src/components",
          "@constants": "./src/constants",
        }
      }
    ],
  ]
}

In order to get the same alias mappings to TypeScript, the tsconfig.json file needs to look like this:

javascript

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@constants/*": ["./src/constants/*"]
    }
  },
  ...
}

Now you can use import statemes with aliases in your TypeScript files too.

Never Miss an Article