Simplifier les chemins des imports TypeScript (“path mapping”)

La technique du “path mapping” permet de simplifier les chemins d’import dans une application TypeScript. Elle s’implémente grâce à la propriété compilerOptions.paths du fichier tsconfig.json du projet.

Par exemple, la config suivante dans tsconfig.json :

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"]
    }
  }
}

permet d’importer jQuery comme suit :

import * as $ from 'jquery';
  • La propriété baseUrl doit être définie si paths est utilisé.
  • Les paths sont résolus relativement à baseUrl. Ainsi, si baseUrl pointe sur autre chose que “.”, i.e. le répertoire de tsconfig.json, les mappings doivent être adaptés en fonction. Par exemple, avec "baseUrl": "./src", il faudrait mapper jquery sur "../node_modules/jquery/dist/jquery".

DOC: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping