TypeScript

【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';


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

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

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

実践TypeScript BFFとNext.js&Nuxt.jsの型定義 [ 吉井 健文 ]
価格:3795円(税込、送料無料) (2022/1/29時点)


COMMENT

メールアドレスが公開されることはありません。