$ ryokkkke.com/TypeScript/tsconfig.json

declarationMap

概要

https://www.typescriptlang.org/tsconfig#declarationMap

{
  "declarationMap": true
}

declarationオプションと併用するオプション。

これをtrueにすると、型定義の map ファイルが作成されます。

VSCode など一般的なエディタでは、コードからその定義元にジャンプ(cmd + clickなど)する機能が存在します。
VSCode では、JS ファイルで定義元にジャンプする際に、参照先の.tsファイルが同じディレクトリに存在する場合は直接そこに飛ぶことができますが、そうでない場合は型定義ファイル(.d.ts)に飛びます。

型定義の map ファイルというのは拡張子.d.ts.mapを持つファイルで、この map ファイルがあると、定義元にジャンプした際に、型定義ファイルではなく実際の TS コードに飛ぶことができます。

公式サイトでは、Project References を使用する際にこれをtrueにすることを推奨しています。

詳細

{
  "outDir": "./dist",
  "declaration": true,
  "declarationMap": false
}

まず、最初に"declarationMap": falseな状態で、以下の 2 つのファイルをコンパイルします。

// func.ts

export const func = () => {
  console.log("func");
};
// index.ts

import { func } from "./func";

func();

その状態でコンパイル結果のindex.jsfunc(↑)をcmd + clickすると、

ここ(↑)、つまり型定義ファイル(func.d.ts)に飛びます。

次に、"declarationMap": trueで再度コンパイルします。

{
  "declaration": true,
  "declarationMap": true
}
// func.d.ts

export declare const func: () => Promise<string>;
//# sourceMappingURL=func.d.ts.map
// func.d.ts.map

{"version":3,"file":"func.d.ts","sourceRoot":"","sources":["../src/func.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,uBAIhB,CAAC"}

結果は上記のように、型定義ファイルに map ファイルのパスのコメントが追加され、map ファイルも作成されました。

この状態で、先ほどのindex.tsfunccmd + clickすると

ここ(↑)、つまり型定義ファイルではなく、実際の TS コードに飛びます。


関連オプション:declarationoutDircomposite