Как использовать пути в tsconfig.json?

Это можно настроить в файле tsconfig.json, поскольку это функция TS.

Сделать можно так:

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

Имейте в виду, что путь, на который вы хотите сослаться, принимает ваш baseUrl в качестве основы маршрута, на который вы указываете, и это обязательно, как описано в документе.

Символ "@" не является обязательным.

После того, как вы настроите его таким образом, вы можете легко использовать его следующим образом:

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

единственное, что вы могли заметить, это то, что intellisense не работает в текущей последней версии, поэтому я бы посоветовал следовать соглашению об индексах для импорта / экспорта файлов.

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

Вы можете использовать комбинацию baseUrl и paths docs.

Предполагая, что корень находится в самом верхнем src каталоге (и я правильно прочитал ваше изображение), используйте

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

Для webpack вам также может потребоваться добавить разрешение модуля. Для webpack2 это может выглядеть как

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

Отметьте эти похожие решения звездочкой

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

Ответ Алехандроса сработал для меня, но поскольку я использую awesome-typescript-loader с webpack 4, мне также пришлось добавить _ 2_ в мой файл webpack.config, чтобы он разрешился правильно

Если вы используете пути, вам нужно будет изменить абсолютные пути обратно на относительные пути, чтобы он работал после компиляции машинописного текста в простой javascript с использованием tsc.

Самым популярным решением для этого пока были tsconfig-paths.

Я пробовал, но у меня не получилось из-за моей сложной настройки. Кроме того, он разрешает пути во время выполнения, что означает накладные расходы с точки зрения размера вашего пакета и производительности разрешения.

Итак, я сам написал решение, tscpaths.

Я бы сказал, что в целом это лучше, потому что он заменяет пути во время компиляции. Это означает, что нет никаких зависимостей во время выполнения или каких-либо накладных расходов на производительность. Пользоваться им довольно просто. Вам просто нужно добавить строку в свои сценарии сборки в package.json.

Проект довольно молодой, поэтому могут возникнуть некоторые проблемы, если ваша настройка очень сложна. Он работает безупречно для моей установки, хотя моя установка довольно сложна.

Это работает для меня:

 yarn add --dev tsconfig-paths

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

Это загружает все пути в tsconfig.json. Пример tsconfig.json:

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

Убедитесь, что у вас есть как baseUrl, так и пути, чтобы это работало

А затем вы можете импортировать, например:

import {AlarmIcon} from 'assets/icons'

Его относительный путь вместо приведенного ниже кода

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

Мы можем избежать того, чтобы "../../../../../" он выглядел странно и нечитабельно.

Таким образом, конфигурационный файл Typescript имеет ответ на то же самое. Просто укажите baseUrl, конфигурация позаботится о вашем относительном пути.

способ настройки: файл tsconfig.json добавьте указанные ниже свойства.

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

Итак, наконец, это будет выглядеть так, как показано ниже

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

Выглядит просто, круто и более читабельно.

если используется typescript + webpack 2 + at-loader, есть дополнительный шаг (решение @ mleko у меня работало только частично):

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

Расширенное разрешение пути в TypeScript 2.0

Решение на 2021 год.

Примечание: CRA. Изначально идея использования сторонней библиотеки или извлечения приложения для псевдонима казалась мне безумной. Однако после 8 часов поиска (и опробования варианта с извлечением) выяснилось, что этот вариант наименее болезненный.

Шаг 1.

yarn add --dev react-app-rewired react-app-rewire-alias

Шаг 2. Создайте файл config-overrides.js в корне вашего проекта и заполните его:

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias({
    assets: './src/assets',
    '@components': './src/components',
  })(config)
}

Шаг 3. Исправьте файл package.json:

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

Если @declarations не работают, добавьте их в файл d.ts. Например: '@constants': './src/constants', = ›добавить в response-app-env.d.ts declare module '@constants';

Это все. Теперь вы можете продолжать использовать команды yarn или npm start / build / test как обычно.

Полная версия в документации.

Примечание. Часть «Использование с конфигурацией ts / js» в документации не сработала для меня. Импорт с псевдонимом ошибки не поддерживается, когда сборка проекта осталась. Поэтому я использовал более простой способ. К счастью, это работает.

Похоже, что было обновление для React, которое не позволяет вам устанавливать "paths" в tsconfig.json больше.

Nicely React просто выводит предупреждение:

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

затем обновляет ваш tsconfig.json и удаляет весь раздел "paths". Есть способ обойти эту пробежку

npm run eject

Это приведет к удалению всех create-react-scripts настроек путем добавления каталогов config и scripts и файлов сборки / конфигурации в ваш проект. Это также дает гораздо больше контроля над тем, как все построено, названо и т. Д., Путем обновления {project}/config/* файлов.

Затем обновите свой tsconfig.json

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

Проверьте работу компилятора с помощью this

Я добавил baseUrl в файл для проекта, как показано ниже:

"baseUrl": "src"

Работает нормально. Итак, добавьте свой базовый каталог для своего проекта.

/ начинается только с корня, чтобы получить относительный путь, мы должны использовать ./ или ../

Если вы используете tsconfig-paths и это не работает для вас, попробуйте следующий tsconfig.json :

{
  // ...
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "baseUrl": ".",
    "paths": {
      "@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
      // ...
    }
  },
  // ...
}

Если компилятор видит @some-folder/some-class, он пытается найти в ./src... или в ./dist....