The easiest way to set up absolute paths in your TypeScript project

The_easiest_way_to_set_up_absolute_paths_in_your_TypeScript_project.md

• The easiest way to set up absolute paths in your TypeScript Node.js project
  • Configure absolute paths
  • Code example
  • Dev
  • Build
  • Start

The easiest way to set up absolute paths in your TypeScript Node.js project

Step-by-step guide. Works with Nest.js, Express.js or any other Node.js project. I'm going to show you how to do this quickly and easily, so let's get started.

Configure absolute paths

1. Initialize the new package in the terminal if you haven't already done so:

npm init -y

Your package.json should look something like this:

{
    "name": "absolute-paths",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

2. Similarly with tsconfig:

npx tsc --init

And don't forget to install typescript as devDependency:

npm i -D typescript @types/node

3. Now let's install the necessary dependencies:

npm i -D ts-node ts-patch tsc-alias tsconfig-paths typescript-transform-paths

4. Next, you need to customize tsconfig.json a bit:

tsconfig.json

{
    "compilerOptions": {
        ...,
        "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
        "paths": {
            "@/*": ["*"]
        } /* Specify a set of entries that re-map imports to additional lookup locations. */,

        "plugins": [
            /* Transform paths in output .js files */
            {
                "transform": "typescript-transform-paths"
            },
            /* Transform paths in output .d.ts files */
            {
                "transform": "typescript-transform-paths",
                "afterDeclarations": true
            }
        ],
        ...
    },
    "ts-node": {
        "transpileOnly": true,
        "files": true
    },
    ...
}

5. After that, add a few scripts to the package.json file:

package.json

{
    ...,
     "scripts": {
        "init": "ts-patch install -s",
        "start:dev": "ts-node ./src/index.ts",
        "start:prod": "node ./build/index.js",
        "build": "tsc && tsc-alias"
    },
    ...
}

Before running the code in development mode, you need to run the init command, and for a successful build, after it, run tsc-alias

6. That's it! You can now use absolute paths in your project. You can also see some code examples below.

Code example

Project file structure

├── package.json
├── src
│   ├── dir
│   │   └── file.ts
│   └── index.ts
└── tsconfig.json

package.json

{
    "name": "absolute-paths",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "init": "ts-patch install -s",
        "start:dev": "ts-node ./src/index.ts",
        "start:prod": "node ./build/index.js",
        "build": "tsc && tsc-alias"
    },
    "devDependencies": {
        "@types/node": "^20.5.0",
        "ts-node": "^10.9.1",
        "ts-patch": "^3.0.2",
        "tsc-alias": "^1.8.7",
        "tsconfig-paths": "^4.2.0",
        "typescript": "^5.1.6",
        "typescript-transform-paths": "^3.4.6"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
        "module": "commonjs" /* Specify what module code is generated. */,
        "outDir": "build" /* Specify an output folder for all emitted files. */,
        "strict": true /* Enable all strict type-checking options. */,
        "skipLibCheck": true /* Skip type checking all .d.ts files. */,
        "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
        "paths": {
            "@/*": ["*"]
        } /* Specify a set of entries that re-map imports to additional lookup locations. */,

        "plugins": [
            /* Transform paths in output .js files */
            {
                "transform": "typescript-transform-paths"
            },
            /* Transform paths in output .d.ts files */
            {
                "transform": "typescript-transform-paths",
                "afterDeclarations": true
            }
        ]
    },
    "ts-node": {
        "transpileOnly": true,
        "files": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "build"]
}

/src/index.ts

import { someData } from '@/dir/file'

console.log(someData)

/src/dir/file.ts

export const someData = 'some data'

Dev

npm run start:dev

Output:

absolute-paths $ npm run start:dev

> [email protected] start:dev
> ts-node ./src/index.ts


> [email protected] init
> ts-patch install -s

some data

Build

npm run build

Output:

absolute-paths $ npm run build

> [email protected] build
> tsc && tsc-alias

Start

npm run start:prod

Output:

absolute-paths $ npm run start:prod

> [email protected] start:prod
> node ./build/index.js

some data

Incredible! Thank you!

Very helpful. just saved me a lot of time