Como usar caminhos no tsconfig.json?

Eu estava lendo sobre caminho-de mapeamento em tsconfig.jsone eu queria usá-lo para evitar o uso dos seguintes caminhos feias:

A organização do projeto é um pouco estranha, porque temos um repositório mono que contém projetos e bibliotecas. Os projetos são agrupados por empresa e por navegador / servidor / universal.

Como posso configurar os caminhos tsconfig.jsonpara que, em vez de:

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

Eu posso usar:

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

Será necessário algo mais na configuração do webpack? ou é o tsconfig.jsonsuficiente?

Isso pode ser configurado no seu arquivo tsconfig.json, pois é um recurso do TS.

Você pode fazer assim:

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

Lembre-se de que o caminho ao qual você deseja se referir leva seu baseUrl como a base da rota para a qual está apontando e é obrigatório, conforme descrito no documento.

O caractere '@' não é obrigatório.

Depois de configurá-lo dessa maneira, você pode usá-lo facilmente assim:

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

a única coisa que você pode notar é que o intellisense não funciona na versão mais recente atual, portanto, sugiro seguir uma convenção de índice para importar / exportar arquivos.

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

Você pode usar a combinação de baseUrle paths documentos .

Supondo que a raiz esteja no srcdiretório superior (e eu li sua imagem corretamente), use

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

Para webpackvocê também pode precisar adicionar a resolução do módulo . Para webpack2isso pode parecer

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

Verifique estas soluções semelhantes com o asterisco

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

A resposta de Alejandros funcionou para mim, mas como eu estou usando o awesome-typescript-loadercom o webpack 4, também tive que adicionar o tsconfig-paths-webpack-pluginarquivo webpack.config ao meu para resolver corretamente

Se você estiver usando caminhos, precisará alterar os caminhos absolutos para caminhos relativos, para que funcione após compilar o texto datilografado em javascript simples tsc.

A solução mais popular para isso tem sido o tsconfig-caminhos até agora.

Eu tentei, mas não funcionou para mim na minha configuração complicada. Além disso, ele resolve caminhos em tempo de execução, o que significa sobrecarga em termos de tamanho do seu pacote e resolve o desempenho.

Então, eu mesmo escrevi uma solução, tscpaths .

Eu diria que é melhor no geral porque substitui os caminhos em tempo de compilação. Isso significa que não há dependência de tempo de execução ou sobrecarga de desempenho. É bem simples de usar. Você só precisa adicionar uma linha aos seus scripts de construção package.json.

O projeto é bem jovem, portanto, pode haver alguns problemas se sua configuração for muito complicada. Funciona perfeitamente para minha configuração, embora ela seja bastante complexa.

se estiver sendo usado o typescript + webpack 2 + at-loader, há uma etapa adicional (a solução da @ mleko estava trabalhando apenas parcialmente para mim):

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

Resolução avançada de caminho no TypeScript 2.0

Isso funciona para mim:

 yarn add --dev tsconfig-paths

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

Isso carrega todos os caminhos no tsconfig.json. Uma amostra tsconfig.json:

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

Verifique se você possui baseUrl e caminhos para que isso funcione

E então você pode importar como:

import {AlarmIcon} from 'assets/icons'

Seu tipo de caminho relativo Em vez do código abaixo

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

Podemos evitar que "../../../../../" pareça estranho e não seja legível também.

Portanto, o arquivo de configuração Typescript tem resposta para o mesmo. Basta especificar o baseUrl, o config cuidará do seu caminho relativo.

maneira de configurar: arquivo tsconfig.json adicione as propriedades abaixo.

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

Então, finalmente, parecerá abaixo

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

Parece simples, incrível e mais legível ..

Faça o checkout da operação do compilador usando este

Eu adicionei baseUrl no arquivo para um projeto como abaixo:

"baseUrl": "src"

Está funcionando bem. Então adicione seu diretório base para o seu projeto.

/começa apenas a partir da raiz, para obter o caminho relativo que devemos usar ./ou../

Parece que houve uma atualização para o React que não permite que você defina o "paths"no mais tsconfig.jsonlongo.

Nicely React apenas emite um aviso:

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

atualiza tsconfig.jsone remove a "paths"seção inteira para você. Existe uma maneira de contornar essa corrida

npm run eject

Este será ejetado todas as create-react-scriptsconfigurações, adicionando confige scriptsdiretórios e arquivos build / configuração em seu projeto. Isso também permite muito mais controle sobre como tudo é construído, nomeado etc., atualizando os {project}/config/*arquivos.

Atualize seu tsconfig.json

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