マナビト
こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangularを
メインに開発業務を行なっています。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangularを
メインに開発業務を行なっています。
今回はTypeScriptでimport文に絶対パスを設定するちょっとした方法について、紹介していきたいと思います。

【TypeScript】 型定義入門
本日はTypeScriptの型定義について取り上げていきたいと思います。
1. TypeScriptとは...
例えば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';
これで色々さかのぼって参照することは無くなりました。
本日はここまでとなります。
最後まで読んでいただきありがとうございました。