web-dev-qa-db-ja.com

VS Codeのタイプ定義ファイルの代わりにTypeScriptソースファイルに移動します

一部のルートプロジェクトで使用されるカスタムnpmライブラリを作成しました。このライブラリはTypeScriptで記述されています。すべてのソースは/srcフォルダの下にあります。

ライブラリのtsconfig.jsonには、次のコンパイラオプションが含まれています。

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

package.jsonファイルには以下が含まれます：

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

最後に、生成されたパッケージには、生成された.jsファイル、d.tsファイル、および.tsソースファイルが含まれます。

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

このカスタムライブラリがインストールされているルートプロジェクトで、ライブラリからインポートされた関数を呼び出す行にブレークポイントを追加し、その中にステップインしてコードをデバッグすることができます。すべてTypeScriptで行います。これは素晴らしい！

But、Visual Studio Codeで、ライブラリからインポートされた関数をCTRL-クリックすると、デバッグせずに、をd.tsタイプに導きます定義ファイル。を.tsソースファイルに導いたほうがいいです。現在の方法では、実際のソースコードを表示する必要がある場合は、/srcの下にあるライブラリの/node_modulesフォルダを自分で参照する必要があります。

タイプ定義ファイルの代わりに、VSCodeで直接TypeScriptソースファイルに移動する方法はありますか？

node.jstypescriptnpmvisual-studio-code
22
electrotype

TypeScript 2.9以降では、declarationMapフラグを使用してライブラリをコンパイルすることが可能です

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

これにより、宣言マップファイル（dist/ActionApi.d.ts.map）および対応するd.tsファイルの下部にあるマップへのリンク

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

VSCodesは、このような宣言マップに遭遇すると、どこに行くべきかを認識し、ソースコードに直接導きます。

14
c_froehlich

セットアップ disableAutomaticTypeAcquisition: true in config。

3
andrewkslv

デバッグすると、実際にはソースマップを持つ実際のjsに落ちます。つまり、TypeScriptソースに落ち込んでいるような気分になります。

しかし、TypeScriptとVSCodeはライブラリのソースについて何も知りません。 TypeScriptは、インポートされたライブラリを検索するときに、package.jsonを検索し、「typings」フィールドを検索し、そこで指定されたファイルを使用します。

ライブラリがTypeScriptにd.tsと.jsを提供するが、ソース自体を提供しない理由はあります。ライブラリがソースを提供する場合は、それらをコンパイルする必要があります。それは奇妙で効率的ではありません：

  1. ライブラリのすべてのユーザーは、自分が依存するすべてのライブラリをコンパイルするためにプロセッサを焼きます。
  2. ユーザーはコンパイル中にnode_modulesの内容を変更します
  3. ユーザーは このような問題を受け取ります

そのため、出荷されたすべてのライブラリは、.d.ts宣言を使用してjsにコンパイルされています。

（ちなみに、何のために）ライブラリソースを本当に見たい場合は、ライブラリソースをsrcディレクトリにコピーして、依存関係から削除します。

2
Pavel