typescript-set-path-by-absolute-path.md

前提

• webpack でバンドルしている
• tsconfig.json の扱い方を知っている（調べられる)

tsconfig.json に追記すること

• compilerOptions に以下の設定をする
  • プロジェクトのベースとなるパスを設定する
  • ベースとなるパスを基準にしてモジュール名への相対パスマッピングをする
• プログラムに含めるファイル名またはパターンのリストをプロジェクト全体に指定する
• プログラムに含めるファイル名またはパターンのリストにスキップさせるファイル名やパターンとして node_modules を指定する

{
  "compilerOptions": {
    ︙
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    ︙
  },
  "include": ["./**/*"],
  "exclude": ["node_modules"]
}

webpack の設定ファイルに追記すること

• バンドル時に、 webpack の設定ファイルを基準にして、モジュール名への相対パスマッピングで使った記述方法を webpack からでも読み込めるように指定する

const base: Configuration = {
  ︙
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  ︙
}

参考

Reactのimport文を絶対パスで設定する(TypeScript版) | ZUMA Lab

TypeScript の paths はパスを解決してくれないので注意すべし！ – 自主的20%るぅる

TypeScript: TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント