【TypeScript】importで絶対パスを指定する方法

マナビト

こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangularを
メインに開発業務を行なっています。

今回はTypeScriptでimport文に絶対パスを設定するちょっとした方法について、紹介していきたいと思います。

【TypeScript】型定義入門本日はTypeScriptの型定義について取り上げていきたいと思います。目次 TypeScriptとは何か？T...

例えばsrcフォルダ配下に下記のような構成があったとします。

├── src
│   ├── app
│          ├── templates
│          │       ├── test.component.html
│          │       ├── test.component.sass
│          │       ├── test.component.ts
│          │
│          ├── sampleCode
│                  ├── sample.code.component.html
│                  ├── sample.code.component.sass
│                  ├── sample.code.component.ts
├── manege
      ├── manege.code.component.ts

import文でsrc 配下の別階層からsampleコンポーネントとtestコンポーネントを読み込もうとする場合、相対パスで記載すると下記のようになります。

import { first, Observable } from 'rxjs';
import { TestCode } from '../../../src/app/templates/test.component';
import { SampleCode } from '../../../src/app/sampleCode/sample.code.component';

この書き方だと、ソースコードの可読性が悪くなり、メンテナンスもしにくいのかなと思います。こういった場合、tsconfig.jsonのcompilerOptionsにパスのエイリアスを設定することで、import文を絶対パスで記述することが出来ます。

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

*が任意の文字で、@/がsrc/に置き換わるようになります。

import { first, Observable } from 'rxjs';
import { TestCode } from '@/app/templates/test.component';
import { SampleCode } from '@/app/sampleCode/sample.code.component';

これで色々さかのぼって参照することは無くなりました。

本日はここまでとなります。
最後まで読んでいただきありがとうございました。