如何在tsconfig.json中使用路径？

我正在阅读有关路径映射的信息tsconfig.json，我想用它来避免使用以下难看的路径：

项目组织有点奇怪，因为我们有一个包含项目和库的单一存储库。这些项目按公司和浏览器/服务器/通用分组。

我该如何配置路径tsconfig.json而不是：

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

我可以用：

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

Webpack配置中是否还需要其他内容？还是tsconfig.json足够？

由于它是TS功能，因此可以在您的tsconfig.json文件上进行设置。

您可以这样：

"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 文档。

假设根目录位于最高src目录（我正确读取了您的图片），请使用

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

因为webpack您可能还需要添加模块分辨率。因为webpack2这看起来像

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

使用星号检查此类似的解决方案

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

Alejandros答案对我awesome-typescript-loader有用，但是当我将webpack 4与一起使用时，我还必须将其添加tsconfig-paths-webpack-plugin到webpack.config文件中才能正确解析

如果您使用的是路径，则在将typescript编译为纯javascript之后，您需要将绝对路径改回相对路径，以使其正常工作tsc。

到目前为止，最流行的解决方案是tsconfig-paths。

我已经尝试过了，但是对于我的复杂设置来说，它不起作用。此外，它还可以在运行时解析路径，这意味着在程序包大小和性能方面的开销。

因此，我自己写了一个解决方案tscpaths。

我会说总体上更好，因为它在编译时会替换路径。这意味着没有运行时依赖性或任何性能开销。使用起来非常简单。您只需在中的构建脚本中添加一行即可package.json。

该项目还很年轻，所以如果您的设置非常复杂，可能会出现一些问题。尽管我的设置相当复杂，但它对我的设置而言是完美的。

如果正在使用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中的高级路径解析

这对我有用：

 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]/...";

我们可以避免“ ../../../../../”看起来很奇怪并且也不可读。

所以打字稿配置文件有答案一样。只要指定baseUrl，config就会照顾您的相对路径。

配置方式： tsconfig.json文件添加以下属性。

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

所以最后看起来像下面

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

它看起来很简单，很棒而且可读性更好。

使用此命令检查编译器操作

我在文件中为以下项目添加了baseUrl：

"baseUrl": "src"

一切正常。因此，为您的项目添加基本目录。

/仅从根开始，以获得我们应该使用的相对路径./或../

似乎有对React的更新，不允许您再设置"paths"in tsconfig.json。

很好，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/*" ]
        }
    },
}