Einfache Imports mit Typescript Path Mapping

In vielen größeren TypeScript Projekten sieht man häufig lange import Anweisungen. ?

import { forIn } from "../../../../../utils/array";

Dabei treten folgende drei Probleme auf:

1. Je tiefer die Struktur desto unübersichtlicher werden die Imports ?️‍♂️
2. Der Code wird schwerer zu refaktorieren ?
3. Wenn Code als externe npm Module ausgelagert werden soll, muss der gesamte Code angepasst werden ?

Wäre es nicht einfacher wenn man folgendes schreiben kann?

import { forIn } from "@orlyapps/utils/array";

Und genau das kann man in TypeScript ❤️ machen. Mit dem Path Mapping Featurelassen sich beliebige Modul Pfade erstellen, welche auf das Dateisystem gemapped werden können.

Angular

In einem Angular Projekt (zum Beispiel erstellt mit der angular-cli) können die Pfade in der tsconfig.json hinterlegt werden

{ "compilerOptions": { ... "baseUrl": "./src", "paths": { "@orlyapps/utils/*": ["app/utils/*"], "@orlyapps/pipes/*": ["app/pipes/*"] } ... }}

Zuerst wird eine basePath gesetzt. Alle Pfade in paths sind relativ zum basePath.

Als zweites können die gewünschten Pfade und das Mapping auf das Dateisystem unter paths hinterlegt werden. So weiß der TypeScript Compiler wo er @orlyapps/utils/array findet. Und zwar hier ./src/app/util/array.ts

Webpack

Für eine einfache Webpack Konfiguration muss das awesome-typescript-loader Plugin installiert werden und in der webpack Config Datei registriert werden.

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');...resolve: { plugins: [ new TsConfigPathsPlugin() ]}...

Zack - Fertig!

Utilities, Componenten oder Directive können so später in private npm Module ausgelagert werden, ohne das der bestehende Code angepasst werden muss.

Praktisch und ein guter Tipp auch für Ionic Projekte und Hybride App Entwicklung! ?