Better know a framework #6 imports paths in Typescript

mttmccb · 2018-03-10 00:47:25 UTC

Sick of long paths?

aurelia-contrib/aurelia-getting-started/blob/master/guides/how-to-simplify-your-import-paths-in-typescript.md

# How to simplify your import paths in Typescript

When your project starts to grow it's not unusual to end up with paths like this. This make it difficult to refactor and slow to add new imports.

```typescript
import {log} from './../../../../services/log';
```

When you'd really rather just do this

```typescript
import {log} from 'services/log';
```

With some adjustments to your `tsconfig.json` you do just that. You need to set the `baseUrl` and the `paths` you want to map, you can find out more about [path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) in the Typescript docs.

T

tsconfig.json
```json

This file has been truncated. show original

zewa666 · 2018-03-10 08:49:19 UTC

Related to that an example how to share folders between projects https://github.com/zewa666/aurelia-cli-shared-folder

Alexander-Taran · 2018-03-10 08:58:46 UTC

@zewa666 would you like to make a PR to guides @ contrib with article and a link to your repo?
(-:

mttmccb · 2018-03-10 09:08:03 UTC

Sounds like a good first step in making a plugin

zewa666 · 2018-03-10 09:28:33 UTC

Hey Im currently burried under work and want to get my documentation going so sadly no time to write an article, but whoever would like to I can assist with Proof reading

Alexander-Taran · 2018-03-10 10:28:01 UTC

@mttmccb would you like to?

mttmccb · 2018-03-10 11:34:52 UTC

Can do, is it a separate tip or maybe included in the above? Need to understand why you add them in aurelia.json, I think it’s so short paths can be used in the templates? Not sure if this is the same for webpack as I haven’t tried yet.

zewa666 · 2018-03-10 16:59:44 UTC

This is meant, so that the bundler knows where the find the dependencies, since the paths by themselves by default don’t exist. The tsconfig.json setting is purely meant for TypeScript so not related to the bundler. How this works for Webpack? No idea, typically you’d have a resolve section where you’d define the aliases, but maybe thats meanwhile already automatically done for TS specific builds.