如何在TypeScript项目之间共享代码？
假设我有两个具有以下文件结构的项目
/my-projects/
/project-a/
lib.ts
app.ts
tsconfig.json
/project-b/
app.ts // import '../project-a/lib.ts'
tsconfig.json我想消费位于lib.ts project-a 的，也来自 project-b**.怎么做？**
- 将其作为NPM模块发布--绝对不想要，对于这样一个简单的用例来说，这是一个过度消耗。我只想在两个项目之间共享一个文件。
- 使用
import '../project-a/lib.ts'-不起作用，TypeScript抱怨
'lib.ts' is not under 'rootDir'. 'rootDir' is expected to contain all source files.
- 将
tsconfig.json设置为一级，这样它将覆盖project-a和project-b--无法做到这一点，对于这些项目，TypeScript配置略有不同。而且不太方便，不想那么做。
还有其他方法吗？
回答 7
Stack Overflow用户
发布于 2019-02-19 18:28:24
因为类型记录3.0可以用项目引用来完成。
打字记录文档：https://www.typescriptlang.org/docs/handbook/project-references.html
我相信您将不得不将lib.ts移动到一个名为“lib”的小ts项目中。
lib项目应该有一个包含以下内容的tsconfig：
// lib/tsconfig.json
{
"compilerOptions": {
/* Truncated compiler options to list only relevant options */
"declaration": true,
"declarationMap": true,
"rootDir": ".",
"composite": true,
},
"references": [] // * Any project that is referenced must itself have a `references` array (which may be empty).
}然后在项目-a和project-b中，将对lib项目的引用添加到tsconfig中。
// project-a/ts-config.json
// project-b/ts-config.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node"
// ...
},
"references": [
{
"path": "../lib",
// add 'prepend' if you want to include the referenced project in your output file
"prepend": true,
}
]
}在库项目中。创建一个文件index.ts，它应该导出您想要与其他项目共享的所有代码。
// lib/index.ts
export * from 'lib.ts';现在，假设lib/lib.ts如下所示：
// lib/lib.ts
export const log = (message: string) => console.log(message);现在可以在项目-a和project-b中从lib/lib.ts导入日志函数。
// project-a/app.ts
// project-b/app.ts
import { log } from '../lib';
log("This is a message");在智力发挥作用之前，您现在需要使用以下方法构建您的项目-a和项目-b：
tsc -b 首先构建项目引用(在本例中为lib)，然后构建当前项目(项目-a或项目-b)。
类型记录编译器不会查看lib中的实际类型记录文件。相反，它将只使用在构建lib项目时生成的类型记录声明文件(*.d.ts)。
这就是为什么lib/tsconfig.json文件必须包含：
"declaration": true,但是，如果使用Visual代码中的F12键导航到项目-a/app.ts中的日志函数的定义，就会看到正确的类型记录文件。至少，如果您已经正确地设置了lib/tsconfig.json，那么：
"declarationMap": true,我创建了一个小型github，用类型记录演示了这个项目引用示例：
Stack Overflow用户
发布于 2018-11-22 09:51:38
这可以通过在CompilerOptions中使用“tsconfig.json”的“路径”属性来实现。
{
"compilerOptions": {
"paths": {
"@otherProject/*": [
"../otherProject/src/*"
]
}
},
}下面是文件夹结构的截图。
下面是引用其他ts-project的tsconfig.json的内容。
{
"compilerOptions": {
"baseUrl": "./",
"outDir": "./tsc-out",
"sourceMap": false,
"declaration": false,
"moduleResolution": "node",
"module": "es6",
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"paths": {
"@src/*": [ "src/*" ],
"@qc/*": [
"../Pti.Web/ClientApp/src/app/*"
]
}
},
"exclude": [
"node_modules",
"dist",
"tsc-out"
]
}下面是引用其他项目导出的导入语句。
import { IntegrationMessageState } from '@qc/shared/states/integration-message.state';Stack Overflow用户
发布于 2018-11-17 20:28:52
我认为@qqilihq的响应是正确的--尽管手动维护node_modules目录的内容可能存在一些问题。
我很幸运地通过使用勒纳来管理这个问题(尽管有许多其他类似的工具，例如，纱线工作区似乎有点类似，尽管我自己也没有使用过)。
我要说的是，对于您所说的内容来说，这可能是一个小小的重量级，但它确实为您的项目提供了很大的灵活性，可以在未来发展。
使用此模式，您的代码最终会看起来如下所示：
/my-projects/
/common-code/
lib.ts
tsconfig.json
package.json
/project-a/
app.ts (Can import common-code)
tsconfig.json
package.json (with a dependency on common-code)
/project-b/
app.ts (Can import common-code)
tsconfig.json
package.json (with a dependency on common-code)这里的一般理论是，该工具在您的内部库和依赖的包的node_modules目录之间创建符号链接。
我在这方面遇到的主要问题是
common-code必须在其package.json文件中同时设置main和types属性。- 任何依赖项都必须编译
common-code才能依赖它。 common-code必须在其tsconfig.json中将declaration设置为true
我对此的一般经验是非常积极的，因为一旦您了解了基本的概念，它就没有什么“魔力”，它只是一组碰巧共享一个目录的标准节点包。
https://stackoverflow.com/questions/47729344
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号