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

# はじめに
エイリアスを使用しない場合、ファイルのインポートには相対パスを使用する必要があります。これは、特にディレクトリ構造が深い場合に、長く複雑なパスになることがあります。
```typescript:example.ts
// src/components/userComponent.ts から src/models/User.ts をインポート
import { User } from '../../models/User';
```
Typescript初めての方下記がおすすめです。

https://qiita.com/oharu121/items/3aadafdd5daa8dc53c64
# 解決策：エイリアスを実装
tsconfig.jsonでエイリアスを指定できます
```diff_typescript:tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
+    "paths": {
+      "@*": ["./*"]
+    },
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}
```
エイリアスを使用することで、インポートパスが簡潔で読みやすくなり、ディレクトリ構造が変更された場合でもインポートステートメントを容易に管理できるようになります。
```diff_typescript:example.ts
// src/components/userComponent.ts から src/models/User.ts をインポート
-import { User } from '../../models/User';
+import { User } from '@models/User';
```
# モジュール以外で実装したい場合
:::note warn
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にパスを追加する
```diff_javascript: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"
  }
}
```
### 実行したいスクリプトにインポートを追加する
```diff_typescript:main.ts
+import "module-alias/register"
import * as MU from "@util/messageUtil"

MU.info("infoです");
MU.task("taskです");
MU.warning("warningです");
MU.error("errorです");
```
これで成功するはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760374/28520ee0-fb8c-7969-86c1-e64188ce1916.png)
# まとめ
この記事では、TypeScriptプロジェクトにおけるインポートパスの問題を解決するためのエイリアスの使用方法について説明しました。エイリアスを使用しない場合、特にプロジェクトのディレクトリ構造が複雑になるにつれて、ファイル間の相対パスが長く複雑になりがちです。これは、コードの可読性を低下させ、メンテナンスを困難にします。