Einfache Imports mit Typescript Path Mapping

Einfache Imports mit Typescript Path Mapping

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 Feature lassen 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! 😎

Mehr Informationen zu Mobile App Entwicklung

Einheitliche Codebasis und plattformübergreifende Entwicklung, das gehört für Orlyapps einfach zusammen. Denn genau das macht Ihre App flexibel und pflegeleicht, egal für welches Endgerät. Oder gleich mehrere.

Beitrag Teilen