如何在TypeScrip 3.0中使用项目引用？ [英] How to use project references in TypeScript 3.0?

问题描述

TypeScrip 3.0中有一个名为Project References的新功能。这表明*.ts模块之间有更好的交互。不幸的是，这就是我能从官方文档😞中得到的全部信息，尽管它似乎写得相当清楚和直接。

谁能帮助我准确地理解，它解决了什么问题，它如何做到这一点，我将如何从中受益？我有一个类似的结构的项目，所以它可能(也可能不)是非常有帮助的。提前感谢您！

---

更新：项目结构大致为：

project/
    lib/
        index.ts # defines the original code
    test/
        index.spec.ts # requires lib/index.ts
    package.json
    tsconfig.json

推荐答案

TL；DR：

该功能允许将项目的各个部分定义为单独的TypeScrip模块。此外，这还允许以不同方式配置这些模块、分别构建它们等。

---

之前

最初，project structure简化后类似于：

/
    src/
        entity.ts # exports an entity
    test/
        entity.spec.ts # imports an entity
    tsconfig.json

_{实体是defined in src/entity.ts module，然后是used in test/entity.spec.ts file。}

注意，这里只有一个tsconfig.json文件，位于根文件夹中。这基本上是说这个文件夹包含一个很大的实体打字项目。此项目包括几个组织在文件夹中的文件；其中一些文件用于测试其他文件。

然而，这种结构带来了一个问题：编译项目的过程(即tsc)还会编译测试文件，从而在输出中创建dist/test/entity.spec.{js|d.ts}文件。这种情况不应该发生，因此对tsconfig.json文件进行了轻微更改，以仅包含那些供外部使用的文件/文件夹：

{
    "compilerOptions": {
        // compiler options
    },
    "include": [
        "./src"
    ]
}

这解决了问题，但在我的例子中，它还导致在开发过程中，TypeScrip编译器偶尔会忽略/test文件夹中的所有文件。此外，这种排他性方法可能不适合所有人。

---

之后

在utilizing the feature之后，项目结构更改为：

/
    src/
        entity.ts # exports an entity
        tsconfig.json
    test/
        entity.spec.ts # imports an entity
        tsconfig.json
    tsconfig-base.json

让我们来看看这些更改：

1. 将/tsconfig.json重命名为/tsconfig-base.json本身是一件非常重要的事情：根文件夹不再是一个类型脚本项目，因为tsc需要tsconfig.json文件存在。
2. 另一方面，添加src/tsconfig.json和test/tsconfig.json文件会将src和test变成两个独立的打字项目，彼此独立。

/{src|test}/tsconfig.json文件的内容与/{src|test}/tsconfig.json相似，因为预期配置中不会发生任何更改，即应保留"；Strigness"；、输出文件夹以及其他此类参数。为了使它们相似，而不复制粘贴任何内容，all the configurations are put in an arbitrary file可从两个位置访问；在本例中，选择根文件夹中的tsconfig-base.json：

// the contents of /tsconfig-base.json
{
    "compilerOptions": {
        // compiler options, common to both projects
    }
}

This file is being "inherited" thenby/{src|test}/tsconfig.json文件，并根据需要添加任何其他选项：

// the contents of /{src|test}/tsconfig.json
{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        // additional compiler options, specific to a project
    }
}

请注意，此模式类似于在未完成实现的情况下定义abstract class，然后通过两个单独的具体类对其进行扩展。

现在，/src和/test文件夹基本上包含两个配置相似的单独的TypeScrip项目。最后要做的是明确两者之间的关系。由于test依赖于src，因此test必须以某种方式了解src。这可以通过两个非常明显的步骤来完成：

• allow src to be "referenced"从外部将其声明为"；复合"；：

  // in /src/tsconfig.json
  {
      "extends": "../tsconfig-base.json",
      "compilerOptions": {
          // compiler options
          "composite": true
      }
  }
  

• reference src from test：

  // in /test/tsconfig.json
  {
      "extends": "../tsconfig-base.json",
      "references": [
          { "path": "../src" }
      ]
  }
  

/tsconfig-base.jsonis not needed now中的"include"数组，因为代码排除是通过绘制新边框来完成的。

更新：自TypeScript 3.7

以来，以下部分似乎已过时

现在，test项目需要*.d.ts文件才能显示src项目。这意味着在运行测试之前，src应该已经单独构建。这是由using the new mode of tsc完成的，由--build选项触发：

tsc --build src

此命令生成src项目并将输出放入指定的输出文件夹(在本例中为/dist)，而不会中断test，也不会丢失任何编译错误。

这篇关于如何在TypeScrip 3.0中使用项目引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！