Come utilizzare i percorsi in tsconfig.json

Questo può essere impostato sul file tsconfig.json, in quanto è una funzionalità di TS.

Puoi fare così:

 "compilerOptions": { "baseUrl": "src", // This must be specified if "paths" is. ... "paths": { "@app/*": ["app/*"], "@config/*": ["app/_config/*"], "@environment/*": ["environments/*"], "@shared/*": ["app/_shared/*"], "@helpers/*": ["helpers/*"] }, ... 

Tieni presente che il percorso in cui vuoi fare riferimento, prende il tuo baseUrl come base del percorso che stai indicando ed è obbligatorio come descritto nel documento.

Il carattere ‘@’ non è obbligatorio.

Dopo averlo configurato in questo modo, puoi facilmente usarlo in questo modo:

 import { Yo } from '@config/index'; 

l’unica cosa che si potrebbe notare è che l’intellisense non funziona nell’ultima versione attuale, quindi suggerirei di seguire una convenzione indice per importare / esportare file.

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

Puoi utilizzare la combinazione di baseUrl e documenti di paths .

Supponendo che root sia nella directory src più in alto (e leggo correttamente la tua immagine) usi

 // tsconfig.json { "compilerOptions": { ... "rootDir": ".", "paths": { "lib/*": [ "src/org/global/lib/*" ] } } } 

Per il webpack potrebbe essere necessario aggiungere anche la risoluzione del modulo . Per webpack2 questo potrebbe sembrare

 // webpack.config.js module.exports = { resolve: { ... modules: [ ... './src/org/global' ] } } 

Controlla questa soluzione simile con l’asterisco

  "baseUrl": ".", "paths": { "*": [ "node_modules/*", "src/types/*" ] }, 

La risposta di Alejandros ha funzionato per me, ma siccome sto usando il awesome-typescript-loader con webpack 4, ho anche dovuto aggiungere il tsconfig-paths-webpack-plugin al mio file webpack.config perché si risolvesse correttamente

se si usa typescript + webpack 2 + at-loader, c’è un passaggio aggiuntivo (la soluzione di @ mleko funzionava solo parzialmente per me):

 // tsconfig.json { "compilerOptions": { ... "rootDir": ".", "paths": { "lib/*": [ "src/org/global/lib/*" ] } } } // webpack.config.js const { TsConfigPathsPlugin } = require('awesome-typescript-loader'); resolve: { plugins: [ new TsConfigPathsPlugin(/* { tsconfig, compiler } */) ] } 

Risoluzione del percorso avanzata in TypeScript 2.0

Se non sbaglio, ./ significa iniziare dalla directory corrente del file mentre / significa iniziare dalla root. Quindi puoi sostituire tutti ../ all’inizio con a /