---
title: "Use fancy imports with path mapping in tsconfig"
date: "2020-10-10"
slug: "use-fancy-imports-with-path-mapping-in-tsconfig"
author: "Dany Paredes"
canonical: "https://danywalls.com/use-fancy-imports-with-path-mapping-in-tsconfig"
description: "In typescript or Angular apps, we can avoid having ugly paths like the following example. import { BookMark } from 'src/app/models/bookmark'; import { BookmarksState } from './../../../state/bookmarks.state'; import { GetBookMark } from './../../../s..."
---

In typescript or Angular apps, we can avoid having ugly paths like the following example.

```typescript
import { BookMark } from 'src/app/models/bookmark';
import { BookmarksState } from './../../../state/bookmarks.state';
import { GetBookMark } from './../../../state/bookmarks.actions';
```
To fancy paths like:

```typescript
import { BookMark } from '@app/models/bookmark';
import { BookmarksState } from '@state/bookmarks.state';
import { GetBookMark } from '@state/bookmarks.actions';
```
##How?
All magic is part of the TypeScript compiler. It supports declaration mappings using ["paths" property](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) in tsconfig.json files.

First, define your base path; if you are in angular applications, into the compiler options, change the base URL from "./" to "src".

```typescript
"compilerOptions": {
    "baseUrl": "src",
....
```

Define shortcuts for each area, for example, components or state, page, etc.

```typescript
 "paths": {
      "@app/*": ["app/*"],
      "@pages/*": ["app/pages/*"],
      "@components/*": ["app/components/*"],
      "@state/*": ["state/*"]
 },
```


Done, change your code in components or files, and vscode will detect the new paths from tsconfig.

> Sometimes, you need to reopen it to detect new paths automatically.

## Before and after.

![Differences between code](/images/posts/use-fancy-imports-with-path-mapping-in-tsconfig/hg-i2Wrkv_13291.png)

## Final
Hopefully, that will give you a bit of help to write clean paths in Typescript or Angular apps. If you enjoyed this post, share it!