typescript - types只能在 - 如何在tsconfig.json中使用路径?




types只能在.ts文件中使用 (8)

我正在阅读 tsconfig.json path-mapping ,我想用它来避免使用以下丑陋的路径:

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

如何在 tsconfig.json 配置路径,而不是:

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

我可以用:

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

webpack配置中还需要其他东西吗? 或者 tsconfig.json 足够了吗?

https://code.i-harness.com


Alejandros的回答对我有用,但是当我使用带有webpack 4的 awesome-typescript-loader typescript awesome-typescript-loader 时,我还必须将 tsconfig-paths-webpack-plugin 到我的webpack.config文件中,以便正确解析


如果您正在使用路径,则需要将绝对路径更改为相对路径,以便在使用 tsctsc 编译为纯JavaScript后将其工作。

到目前为止,最流行的解决方案是 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中的高级路径分辨率


它的相对路径而不是下面的代码

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

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

所以Typescript配置文件也有相同的答案。 只需指定baseUrl,config就会照顾你的相对路径。

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

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

所以最后它将如下所示

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

它看起来简单,令人敬畏,更具可读性..


用星号检查这个类似的解决方案

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

看起来React有一个更新,它不允许你在 tsconfig.json 设置 "paths"

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

这将通过将 configscripts 目录以及build / config文件添加到项目中来弹出所有 create-react-scripts 设置。 通过更新 {project}/config/* 文件,这还可以 更好地控制 所有内容的构建,命名等。

然后更新你的 tsconfig.json

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

这对我有用:

 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'

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





tsconfig