[解決済み】tsconfig.jsonでパスを使用する方法とは？

質問

について読んでいました。 パスマッピング で tsconfig.json で、以下のような醜いパスの使用を避けるために、これを使いたかったのです。

プロジェクトとライブラリの入ったモノリポジトリがあるので、プロジェクトの構成は少し変です。プロジェクトは会社ごと、ブラウザ/サーバ/ユニバーサルごとにグループ化されています。

のパスはどのように設定すればよいのでしょうか？ tsconfig.json の代わりになるように。

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

使えるんです。

import { Something } from "lib/src/[browser/server/universal]/...";

webpack の設定に何か他のものが必要なのでしょうか？ それとも tsconfig.json で十分でしょう？

どのように解決するのですか？

TSの機能なので、tsconfig.jsonファイル上で設定できます。

このようにすることができます。

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

参照するパスのベースとなるbaseUrlは、ドキュメントにあるように必須であることに留意してください。

文字'@'は必須ではありません。

そうやって設定したら、こんな風に簡単に使えるようになります。

import { Yo } from '@config/index';

ただ、現在の最新版ではインテリセンスが効かないので、ファイルのインポート/エクスポートはインデックス規約に従って行うことをお勧めします。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping