使用 TypeScript 项目引用来共享通用代码

你是否想过能否在 TypeScript 项目之间共享接口、类型和函数？

我目前正在开发一个项目，该项目包含两个独立的 TypeScript 应用程序，一个是 React.js 仪表板，另一个是用 Node.js 编写的 Azure 函数应用程序。作为项目的一部分，仪表板会调用 Azure 函数应用程序中的一个 API。这让我想到，既然我同时控制着数据源和使用该数据的应用程序，那么我是否可以在这两个项目之间共享某些接口呢？

答案是肯定的，从 TypeScript 3 版本开始，您可以使用项目引用在 TypeScript 项目之间共享代码。然而，在我的项目中使用项目引用时，我找不到任何官方示例——因此才有了这篇文章！

以下的实现方法对我有效，但如果您有任何改进建议，请在评论中告诉我。

 什么是项目参考文献？

项目引用允许你将 TypeScript 程序拆分成更小的模块。这样做可以显著缩短构建时间，强制组件之间进行逻辑分离，并以更新、更有效的方式组织代码。

 如何使用

假设有一个项目，它包含一个用 TypeScript 编写的前端和一个后端。两者都包含一个名为 `<interface>` 的接口，IData这两个接口的内容完全相同。目前，每次我修改代码时，都必须在另一个文件中复制一遍（这非常麻烦）。

项目目录为：

myproject
- frontend
  - app.ts
  - interfaces
    - IData.ts
  - tsconfig.json
- backend
  - server.ts
  - interfaces
    - IData.ts
  - tsconfig.json

为了IData.ts在两个项目之间使用单个文件，我们可以使用项目引用。

 添加通用 TypeScript 项目

我们将首先创建一个名为 `<project_name>` 的第三个 TypeScript 项目common，添加一个空tsconfig.json文件并将IData.ts接口复制到该项目中。我们也可以将其从 `<project_name>`frontend和 ` backend<project_name>` 应用中移除。因此，目录结构将如下所示：

myproject
- frontend
  - app.ts
  - tsconfig.json
- backend
  - server.ts
  - tsconfig.json
- common
  - interfaces
    - IData.ts
  - tsconfig.json

但这还不够。我们需要在common应用程序中添加以下内容：tsconfig.json

{
    "compilerOptions": {
        "target": "es5", // Or whatever you want
        "module": "es2015", // Or whatever you want
        "declaration": true,
        "declarationMap": true,
        "outDir": "./dist",
        "composite": true
    }
}

关键部分包括：

• declaration生成一个声明文件，供应frontend用backend程序引用应用common程序中的项目。
• composite确保 TypeScript 可以快速确定引用项目的输出位置
• declarationMap：启用“转到定义”和“重命名”等编辑器功能，以便在受支持的编辑器中跨项目边界透明地导航和编辑代码。

frontend参考/中的通用项目backend

IData为了在应用程序frontend和应用中引用通用接口backend，我们需要对它们的tsconfig.json文件进行简单的更改。将该references属性添加到您现有的tsconfig.json.

{
    "compilerOptions": {
        // The usual
    },
    "references": [
        { "path": "../common" }
    ]
}

 构建frontend/backend应用

现在我们已经添加了对通用应用程序的引用以访问其接口，我们需要编译这两个frontend应用backend程序。

这样做时，请确保使用--buildTypeScript 自动构建所有引用项目的选项。

tsc --build .

注意：如果您使用的是 Next.js 和 TypeScript，则无需执行此操作。两者next dev都能next build正常工作。

 将通用接口导入frontend/backend

这比你想象的要简单，只需IData使用相对路径导入即可。TypeScript 会在编译时自动处理。

import IData from '../common/interfaces/IData'

注意：如果您的编译器无法正确处理该IData文件，您可以type在句点后添加内容import。参见：https ://dev.to/uppajung/comment/1f6bc

概括

在这篇文章中，我演示了如何使用 TypeScript项目引用来使用一个公共项目，以便共享接口、函数、类型等等！

非常感谢您对我的方法提出反馈！正如我上面所说，我找不到官方示例来指导我如何使用项目引用，所以评论区的任何反馈都将帮助我改进本教程以及我自己的 TypeScript 项目！

感谢阅读！