¿Cómo usar las rutas en tsconfig.json?

Estaba leyendo sobre el mapeo de rutas en tsconfig.jsony quería usarlo para evitar usar las siguientes rutas feas:

La organización del proyecto es un poco extraña porque tenemos un mono-repositorio que contiene proyectos y bibliotecas. Los proyectos están agrupados por empresa y por navegador / servidor / universal.

¿Cómo puedo configurar las rutas en tsconfig.jsonlugar de:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Puedo usar:

import { Something } from "lib/src/[browser/server/universal]/...";

¿Se requerirá algo más en la configuración del paquete web? o es tsconfig.jsonsuficiente?

Esto se puede configurar en su archivo tsconfig.json, ya que es una característica de TS.

Puedes hacer así:

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

Tenga en cuenta que la ruta a la que desea hacer referencia, toma su baseUrl como la base de la ruta a la que apunta y es obligatorio como se describe en el documento.

El carácter '@' no es obligatorio.

Después de configurarlo de esa manera, puede usarlo fácilmente de esta manera:

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

Lo único que puede notar es que el intellisense no funciona en la última versión actual, por lo que sugeriría seguir una convención de índice para importar / exportar archivos.

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

Puede usar la combinación de baseUrly paths documentos .

Asumiendo que la raíz está en el srcdirectorio superior (y leí tu imagen correctamente) usa

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

Por webpackTambién podría ser necesario añadir Resolución del módulo . Para webpack2esto podría verse como

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

Comprueba estas soluciones similares con asterisco

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

La respuesta de Alejandros funcionó para mí, pero como estoy usando el awesome-typescript-loadercon webpack 4, también tuve que agregarlo tsconfig-paths-webpack-plugina mi archivo webpack.config para que se resuelva correctamente

Si está utilizando rutas, deberá volver a cambiar las rutas absolutas a rutas relativas para que funcione después de compilar el mecanografiado en JavaScript simple usando tsc.

La solución más popular para esto ha sido tsconfig-caminos hasta ahora.

Lo he intentado, pero no me funcionó para mi configuración complicada. Además, resuelve rutas en tiempo de ejecución, lo que significa una sobrecarga en términos del tamaño de su paquete y resuelve el rendimiento.

Entonces, escribí una solución yo mismo, tscpaths .

Yo diría que es mejor en general porque reemplaza las rutas en tiempo de compilación. Significa que no hay dependencia del tiempo de ejecución ni sobrecarga de rendimiento. Es bastante simple de usar. Solo necesita agregar una línea a sus scripts de compilación package.json.

El proyecto es bastante joven, por lo que podría haber algunos problemas si su configuración es muy complicada. Funciona perfectamente para mi configuración, aunque mi configuración es bastante compleja.

si se está utilizando typecript + webpack 2 + at-loader, hay un paso adicional (la solución de @ mleko solo funcionaba parcialmente para mí):

// 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 } */)
    ]
}

Resolución de ruta avanzada en TypeScript 2.0

Esto funciona para mi:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

Esto carga todas las rutas en tsconfig.json. Una muestra tsconfig.json:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

Asegúrese de tener tanto baseUrl como rutas para que esto funcione

Y luego puedes importar como:

import {AlarmIcon} from 'assets/icons'

Su tipo de ruta relativa En lugar del código siguiente

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Podemos evitar que "../../../../../" parezca extraño y no legible también.

Entonces, el archivo de configuración de TypeScript tiene una respuesta para lo mismo. Simplemente especifique baseUrl, config se encargará de su ruta relativa.

forma de configuración: el archivo tsconfig.json agrega las siguientes propiedades.

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

Así que finalmente se verá a continuación

import { Something } from "@app/src/[browser/server/universal]/...";

Se ve simple, impresionante y más legible.

Verifique la operación del compilador usando esto

He agregado baseUrl en el archivo para un proyecto como el siguiente:

"baseUrl": "src"

Esta funcionando bien Entonces agregue su directorio base para su proyecto.

/comienza solo desde la raíz, para obtener la ruta relativa que debemos usar ./o../

Parece que ha habido una actualización de React que no te permite configurarla "paths"en tsconfig.jsonningún momento.

Nicely React solo genera una advertencia:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

luego actualiza su tsconfig.jsony elimina la "paths"sección completa para usted. Hay una manera de evitar esta carrera

npm run eject

Esto expulsará todas las create-react-scriptsconfiguraciones agregando configyscripts directorios y archivos de construcción / configuración en su proyecto. Esto también permite un mayor control sobre cómo se construye, nombra, etc., todo mediante la actualización de{project}/config/* archivos.

Luego actualice su tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}