[Typescript] import先を@（エイリアス）で指定する

はじめに

エイリアスを使用しない場合、ファイルのインポートには相対パスを使用する必要があります。これは、特にディレクトリ構造が深い場合に、長く複雑なパスになることがあります。

example.ts

// src/components/userComponent.ts から src/models/User.ts をインポート
import { User } from '../../models/User';

Typescript初めての方下記がおすすめです。

解決策：エイリアスを実装

tsconfig.jsonでエイリアスを指定できます

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
+    "paths": {
+      "@*": ["./*"]
+    },
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

エイリアスを使用することで、インポートパスが簡潔で読みやすくなり、ディレクトリ構造が変更された場合でもインポートステートメントを容易に管理できるようになります。

example.ts

// src/components/userComponent.ts から src/models/User.ts をインポート
-import { User } from '../../models/User';
+import { User } from '@models/User';

モジュール以外で実装したい場合

reactのプロジェクトなら下記の手順がいらないです

モジュールではなく、普通のスクリプトでエイリアスを使ったら下記のようなエラーが出ます。

Error: Cannot find module '@util/messageUtil'
Require stack:
- E:\Script_testing\qitta\colorful-console\main.ts
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (E:\Script_testing\qitta\colorful-console\node_modules\@cspotcode\source-map-support\source-map-support.js:811:30)
    at Function.Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (E:\Script_testing\qitta\colorful-console\main.ts:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module.m._compile (E:\Script_testing\qitta\colorful-console\node_modules\ts-node\src\index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.require.extensions.<computed> [as .ts] (E:\Script_testing\qitta\colorful-console\node_modules\ts-node\src\index.ts:1621:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'E:\\Script_testing\\qitta\\colorful-console\\main.ts' ]
}

module-aliasをダウンロード

npm install module-alias --save-dev

package.jsonにパスを追加する

package.json

{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
+ "_moduleAliases": {
+   "@util": "util"
+ },
  "scripts": {
    "main": "ts-node main.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dayjs": "^1.11.10"
  },
  "devDependencies": {
    "@types/node": "^20.12.5",
    "module-alias": "^2.2.3",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.4"
  }
}

実行したいスクリプトにインポートを追加する

main.ts

+import "module-alias/register"
import * as MU from "@util/messageUtil"

MU.info("infoです");
MU.task("taskです");
MU.warning("warningです");
MU.error("errorです");

これで成功するはずです。

まとめ

この記事では、TypeScriptプロジェクトにおけるインポートパスの問題を解決するためのエイリアスの使用方法について説明しました。エイリアスを使用しない場合、特にプロジェクトのディレクトリ構造が複雑になるにつれて、ファイル間の相対パスが長く複雑になりがちです。これは、コードの可読性を低下させ、メンテナンスを困難にします。