关键词：
【中文标题】带有引用的 TypeScript 项目【英文标题】：TypeScript project with references 【发布时间】：2019-08-02 14:01:43 【问题描述】：我使用project references 来引用“前”和“后”项目中的“共享”项目。
tsc -v: Version 3.3.3
项目结构：
./MY_PROJECT.code-workspace /* the only file in this level */
./back
./back/tsconfig.json
./shared/src/
./shared/
./shared/tsconfig.json
./shared/src/
./front
./front/tsconfig.json
./front/src
我正在尝试从共享项目中将一个模块导入./front/src/article-view-model.ts：
import Article from "@shared/src/article"; // alias path
import Article from "../../shared/src/article"; // full relative path
export default class ArticleViewModel
以下错误会立即在 VS Code GUI 中显示：
对于别名路径：
找不到模块“@shared/src/article”。 ts(2307)
完整的相对路径：
输出文件 '../../shared/src/article' 不是从源文件 'c:/SOMEWHERE_IN_MY_PC/shared/src/article.ts' 构建的。 ts(6305)
Intellisense (VS Code) 确实适用于别名和相对选项：
如果我尝试忽略错误并构建，它会失败：
C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:1296 扔 e; ^
错误：调试失败。虚假表达。 在 mergeSymbol (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25861:26) 在 C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25960:47 在 Map.forEach () 在 mergeSymbolTable (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25958:20) 在 initializeTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:48653:21) 在 Object.createTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25711:9) 在 getDiagnosticsProducingTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:71398:93) 在 Object.getGlobalDiagnostics (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:71755:72) 在 Object.getGlobalDiagnostics (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:73528:86) 在 buildSingleProject (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:75803:127)
./front/tsconfig.json 内容：
"compilerOptions":
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"module": "amd",
"noEmitOnError": true,
"noImplicitAny": false,
"out": "./lib/front-bundle.js",
"paths": "@shared/*" : ["../shared/*"],
"preserveConstEnums": true,
"removeComments": true,
"sourceMap": true,
"target": "es2015",
"watch": true
,
"include": [
"./src/**/*.ts",
],
"references": [
"path": "../shared"
]
./shared/tsconfig.json 内容：
"compilerOptions":
"allowSyntheticDefaultImports": true,
"composite": true,
"declaration": true,
"module": "amd",
"noEmitOnError": true,
"noImplicitAny": false,
"out": "./lib/shared-bundle.js",
"preserveConstEnums": true,
"removeComments": true,
"sourceMap": true,
"target": "es2015",
"watch": true
,
"include": [
"./src/**/*.ts",
]
【问题讨论】：
【参考方案1】：这完全不能直接回答您的问题，但我觉得提供替代方案可能仍然有用。
以“更标准”的方式解决此问题的一种方法是将您的 3 个代码库全部设为 NPM 包。
这样您的导入将类似于@vendor/shared/foo 而不是../../../../shared/src/article。
使用npm link 可以轻松处理项目的交叉依赖关系。
从技术上讲，您甚至不需要修改源代码结构（尽管您可能想要）。 shared 依赖项只是通过 node_modules 软链接。
【讨论】：
作为建议，我应该说使用npm link 并不总是最好的方法。由于使用了符号链接，我发现了一些问题，因此无法展平依赖关系，从而导致最终构建和开发之间存在差异。它肯定是一个很酷的开发工具，但并不总是最好的解决方案。只是我的两分钱！
@leonardfactory 很高兴知道！通常打开“npm link”对我来说是一种暂时的状态，直到我可以停止进行交叉回购开发。我绝对可以看到这可能会成为一个问题。
我尝试使用 yalc 进行本地开发，它的工作方式类似于 npm 链接，具有扁平化支持和良好的观看模式，我建议！【参考方案2】：
我能够重现您遇到的错误如果我在包含front、back 和shared 的目录中有错误的tsconfig.json。在这种情况下，运行tsc -b 会在当前目录中找到错误的tsconfig.json，并且由于它没有配置正确的paths 或其他任何东西，因此编译失败并出现与您遇到的相同的错误。
否则，如果我使用您的文件并发出 tsc -b front 而不是 tsc -b，它编译不会出错。
VSCode 没有遇到问题的原因是，为了提供补全功能，TypeScript 编辑器（通常）使用 TypeScript 提供的名为 tsserver 的工具。当编辑器给出tsserver 的文件路径时，tsserver 通过查找包含源文件的目录，然后向上查找父目录，以此类推，直到找到一个相关的tsconfig.json 987654334@ 文件。因此，当 VSCode 在front/src/foo.ts 上工作并要求tsserver 提供补全时，tsserver 会查找没有匹配文件的front/src，然后查找front，并在那里找到tsconfig.json。
【讨论】：
我在./ 文件夹中没有tsconfig.json 文件。稍微更新了问题。
如果您在目录层次结构中有更高的tsconfig.json 文件，它也会被拾取。
任何级别都没有【参考方案3】：
如果您是从根文件夹编译，请尝试添加一个本地 tsconfig.json 文件并设置所有 references，即 references: path: './shared' 。否则，tsc 将找不到相关的项目来构建。
此外，没有 root tsconfig.json 将 不 允许 VSCode GUI 在查找 root tsconfig.json 时正常工作（这是我上次检查的状态，在这里你可以找到related issue)。
该错误似乎与丢失文件有关。如果您可以提供有关您所采取的构建步骤的更多详细信息，我可以尝试更好地检查它
【讨论】：
【参考方案4】：我在这里的最后一次活动后几乎没有解决它，但我不能 100% 确定这是否由于以下更改而发生。反正我还是发在这里，因为还有新的观点和投票，所以可能对其他人有价值：
这就是变化：
在 ./shared/tsconfig.json 内容中： 而不是：
"compilerOptions":
"allowSyntheticDefaultImports": true,
"composite": true,
"declaration": true,
"module": "amd",
"noEmitOnError": true,
"noImplicitAny": false,
"out": "./lib/shared-bundle.js", <-------------
"preserveConstEnums": true,
"removeComments": true,
"sourceMap": true,
"target": "es2015",
"watch": true
,
"include": [
"./src/**/*.ts",
]
用途：
"compilerOptions":
"allowSyntheticDefaultImports": true,
"composite": true,
"declaration": true,
"module": "amd",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "./lib/", <-------------
"preserveConstEnums": true,
"removeComments": true,
"rootDir": "./src", <-------------
"sourceMap": true,
"target": "es2015",
"watch": true
,
"include": [
"./src/**/*.ts",
]
【讨论】：
【参考方案5】：我来到这里是为了解决“尚未从源文件构建”错误。原来tsc 监视进程没有正确退出，所以我有两个实例争夺文件。以防万一其他人遇到同样的问题?
【讨论】：
哇，谢谢！ IDE 正在运行另一个手表。【参考方案6】：在搜索“尚未从源文件构建打字稿参考”时发现此问题。
我的错误是当我should've been using the --build flag:tsc --build tsconfig.json 时我正在运行tsc -p tsconfig.json。如果您使用-p 运行，TypeScript 将不会构建引用的项目。仅当您使用--build 运行时。
【讨论】：
该死的。这很奇怪。这也为我解决了谢谢。如何在带有 Typescript 的 React 项目中组织类型定义
】如何在带有Typescript的React项目中组织类型定义【英文标题】：HowtoorganizetypesdefinitionsinaReactProjectw/Typescript【发布时间】：2020-10-0323:52:00【问题描述】：我已经在我的项目中使用typescript一个月了，我一直在努力解决一些疑问。是... 查看详情
如何在 TypeScript 3.0 中使用项目引用？
】如何在TypeScript3.0中使用项目引用？【英文标题】：HowtouseprojectreferencesinTypeScript3.0?【发布时间】：2019-01-0822:28:36【问题描述】：TypeScript3.0中有一个名为ProjectReferences的新功能。它表明*.ts模块之间可以更好地交互。不幸的是，... 查看详情
如何在带有 Typescript 项目的 React Native 中使用 AWS Amplify？
】如何在带有Typescript项目的ReactNative中使用AWSAmplify？【英文标题】：HowtouseAWSAmplifyinReactNativewithTypescriptProject?【发布时间】：2020-10-1204:26:57【问题描述】：我正在尝试在使用typescript的reactnative项目中添加AmplifyAuthentication。放大文... 查看详情
angular6+typescript项目中怎么引用包装到jquery里面的插件
Angular6+Typescript项目中用到了一个包含到jquery里面的插件 fontIconPickerhttps://github.com/fontIconPicker/fontIconPickerhttps://codeb.it/fonticonpicker/首先根据github上面的readme安装jquery和fonticonpickernpminstall[email& 查看详情
如何在带有 typescript 项目的 react js 中使用 .env 文件？
】如何在带有typescript项目的reactjs中使用.env文件？【英文标题】：howtouse.envfileinareactjswithtypescriptproject?【发布时间】：2021-02-0317:55:37【问题描述】：我有一个reactjs项目，但带有打字稿。我知道我们可以创建.env文件并定义一些配... 查看详情
node项目，使用typescript时，如何引用使用json文件
...文档上找不到对应的字段答案出自官网的文档更新版本Typescript2.9。即添加compilerOptions配置项"resolveJsonModule":true即可。我的tsconfig.json如 查看详情
使用 TypeScript 3 项目参考时出现“找不到模块”错误
】使用TypeScript3项目参考时出现“找不到模块”错误【英文标题】："Cannotfindmodule"errorwhenusingTypeScript3ProjectReferences【发布时间】：2019-02-1609:41:19【问题描述】：我正在尝试使TypeScript3的项目引用正常工作，但难以从引用的... 查看详情
TypeScript：编译删除未引用的导入
】TypeScript：编译删除未引用的导入【英文标题】：TypeScript:compilingremovesunreferencedimports【发布时间】：2013-02-2210:41:43【问题描述】：在我们的项目中，我们使用RequireJS作为我们的模块加载器。我们的一些模块会影响全局库，因此... 查看详情
带有属性的函数的 TypeScript 接口
】带有属性的函数的TypeScript接口【英文标题】：TypeScriptinterfaceforfunctionwithproperties【发布时间】：2015-12-2000:00:34【问题描述】：我在Angular.js项目中使用TypeScript并使用Jasmine进行测试。当我使用spyOn模拟对象上的方法时，Jasmine会将... 查看详情
TypeScript 项目的目录结构
】TypeScript项目的目录结构【英文标题】：DirectorystructureforTypeScriptprojects【发布时间】：2016-06-1814:47:48【问题描述】：TypeScript项目的惯用目录结构是什么？我希望这种结构具有以下功能：TypeScript源代码和转译的JavaScript的单独目... 查看详情
带有 webpack 别名的 Vue-typescript 错误，找不到路径
】带有webpack别名的Vue-typescript错误，找不到路径【英文标题】：Vue-typescripterrorwithwebpackalias,pathnotfound【发布时间】：2019-06-3021:19:43【问题描述】：我在使用typescript的vue项目上配置webpack别名时遇到问题。如果我使用普通的javascript... 查看详情
带有承诺返回错误的 Typescript onPress
】带有承诺返回错误的TypescriptonPress【英文标题】：TypescriptonPressWithPromiseReturnedError【发布时间】：2020-04-3012:20:24【问题描述】：我第一次在我的项目中实现typescript，我遇到了来自onPress的错误，它调用了toggleModal。错误来自onPress... 查看详情
如何正确使用带有 typescript 的 createAsyncThunk 函数？
】如何正确使用带有typescript的createAsyncThunk函数？【英文标题】：HowdoIproperlyusecreateAsyncThunkfunctionwithtypescript?【发布时间】：2021-12-2409:07:10【问题描述】：你可以找到完整的项目here。我有以下代码：extraReducers:(builder)=>builder.addC... 查看详情
Ionic 3 - 带有引用单击项目的按钮的列表视图
】Ionic3-带有引用单击项目的按钮的列表视图【英文标题】：Ionic3-listviewwithbuttonsreferencingtheclickeditem【发布时间】：2018-03-0712:02:05【问题描述】：我有一个带有按钮布局的简单列表：<ion-listinset*ngFor="letaudioofevent.audios;leti=index">... 查看详情
.Net Core 中的 Http 绑定使用带有 wcf 引用的库项目
】.NetCore中的Http绑定使用带有wcf引用的库项目【英文标题】：HttpBindingsin.NetCoreconsumingaLibraryProjectwithwcfreference【发布时间】：2021-07-2905:11:18【问题描述】：我的.netcore3.1项目引用了一个在.NetFramework3.5中构建的类库项目。库项目有... 查看详情
VueJS 项目和 TypeScript 中的范围错误
】VueJS项目和TypeScript中的范围错误【英文标题】：ErrorofscopeinVueJSproject&TypeScript【发布时间】：2021-04-2903:06:16【问题描述】：我在一个带有TypeScript的VueJS项目中出现错误，我的vue文件被拆分为HTML、CSS、TS和vue。我有这个错误：... 查看详情
Visual Studio：如何使用 IIS Express 和跨项目引用在共享项目中调试 TypeScript（无链接或复制文件）
...alStudio：如何使用IISExpress和跨项目引用在共享项目中调试TypeScript（无链接或复制文件）【英文标题】：VisualStudio:HowtodebugTypeScriptinasharedprojectusingIISExpressandcross-projectreferences(nolinkingorduplicatingfiles)【发布时间】：2015-03-0122:23:29【问... 查看详情
React/Typescript：选定项目计数器逻辑
】React/Typescript：选定项目计数器逻辑【英文标题】：React/Typescript:Selecteditemscounterlogic【发布时间】：2021-07-1317:22:27【问题描述】：我一直在尝试创建一个带有计数器的选择列表。目标是能够选择尽可能多的项目，并有一个小标... 查看详情