Better know a framework #6 imports paths in Typescript

mttmccb · March 10, 2018, 12:47am

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 · March 10, 2018, 8:49am

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

Alexander-Taran · March 10, 2018, 8:58am

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

mttmccb · March 10, 2018, 9:08am

Sounds like a good first step in making a plugin

zewa666 · March 10, 2018, 9:28am

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 · March 10, 2018, 10:28am

@mttmccb would you like to?

mttmccb · March 10, 2018, 11:34am

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 · March 10, 2018, 4:59pm

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.