转到 TypeScript 源文件而不是 VS Code 中的类型定义文件 [英] Go to the TypeScript source file instead of the type definition file in VS Code

问题描述

我创建了一个用于某些根项目的自定义 npm 库.这个库是用 TypeScript 编写的.所有源代码都在 /src 文件夹下.

I created a custom npm library that is used in some root projects. This library is written in TypeScript. All sources are under a /src folder.

库的 tsconfig.json 包含这些编译器选项:

The tsconfig.json of the library contains those compiler options :

"sourceMap": true
"outDir": "dist"

package.json 文件包含:

"main": "dist/src/index.js",
"typings": "dist/src",
"files": [
  "src",
  "dist"
],

最后，生成的包包含生成的.js文件、d.ts文件和.ts源文件:

In the end, the generated package contains the generated .js files, the d.ts files and the .ts source files :

- package.json
- /dist (`.js` and `d.ts` files)
- /src (`.ts` files)

在安装了此自定义库的根项目中，我可以在调用从库中导入的函数并单步调试其代码的行上添加断点，所有这些都在 TypeScript 中.这太棒了！

In a root project where this custom library has been installed, I'm then able to add a breakpoint on a line calling a function imported from the library and stepping into it to debug its code, all in TypeScript. This is great!

但是，在 Visual Studio Code 中，当我按住 CTRL 键单击从库中导入的函数时，无需调试，它会引导我进入 d.ts 类型定义文件.我更喜欢它引导到.ts源文件！目前的情况是，如果我需要查看实际的源代码，我必须自己浏览到库的 /src 文件夹，在 /node_modules 下.

But, in Visual Studio Code, when I CTRL-Click on a function imported from the library, without debugging, it leads me to the d.ts type definition file. I would prefere it to lead to the .ts source file! The way it is currently, I have to browse by myself to the /src folder of the library, under /node_modules, if I need to see the actual source code.

有没有办法在VSCode中直接进入TypeScript源文件，而不是类型定义文件?

Is there a way to go to the TypeScript source file directly in VSCode, instead of the type definition file?

推荐答案

从 Typescript 2.9 开始，可以使用 declarationMap 标志编译您的库

Since Typescript 2.9 it is possible to compile your library with the declarationMap flag

./node_modules/typescript/bin/tsc -p . --declarationMap

这样做会创建一个声明映射文件(dist/ActionApi.d.ts.map)和一个指向相应 d.ts 文件底部的映射的链接

Doing so creates a declaration map file (dist/ActionApi.d.ts.map) and a link to the map at the bottom of the corresponding d.ts file

//# sourceMappingURL=ActionApi.d.ts.map

当 VSCodes 遇到这样的 declarationMap 时，它知道该去哪里，并直接引导您找到源代码.

When VSCodes encounters such a declarationMap it knows where to go to and leads you directly to the source code.

这篇关于转到 TypeScript 源文件而不是 VS Code 中的类型定义文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！