Remo H. Jansen Remo H. Jansen - 2 years ago 411
TypeScript Question

How to use paths in tsconfig.json

I was reading about path-mapping in

tsconfig.json
and I wanted to use it to avoid using the following ugly paths:

enter image description here

The project organization is a bit weird because we have a mono-repository that contains projects and libraries. The projects are grouped by company and by browser / server / universal.

enter image description here

How can I configure the paths in
tsconfig.json
so instead of:


import { Something } from "../../../../../lib/src/[browser/server/universal]/...";


I can use:


import { Something } from "lib/src/[browser/server/universal]/...";


Will something else be required in the webpack config? or is the
tsconfig.json
enough?

Answer Source

This can be set up on your tsconfig.json file, as it is a TS feature.

You can do like this:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Have in mind that the path where you want to refer to, it takes your baseUrl as the base of the route you are pointing to and it's mandatory as described on the doc.

The character '@' is not mandatory.

After you set it up on that way, you can easily use it like this:

import { Yo } from '@config/index';

the only thing you might notice is that the intellisense does not work in the current latest version, so I would suggest to follow an index convention for importing/exporting files.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download