Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する

Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する

Angular プロジェクトを作成すると、プロジェクト名 – src -tsconfig.jsonファイルが作成されます。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

このファイルを修正することで、TypeScriptのimport文にエイリアスを指定することができます。慣例としてアットマークが使われるようです。

要するに

import '../../../aaa.component';

というように深い階層の記述は可読性が悪いので、エイリアスを使用して見やすくするわけです。

tsconfig.jsonを編集する

tsconfig.jsonを以下のように修正します。

"baseUrl": "src",
"paths": {
  "@app/*": ["app/*"],
  "@const/*": ["app/const/*"]
},

src – app配下を@app/～と記述することができるようにエイリアス指定しています。

カンマ区切りでエイリアスを複数指定することも可能です。

※tsconfig.jsonファイルはTypeScriptの設定ファイルです。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^