⭐
TypeScriptのimport文を絶対パスで書くと便利
import文の相対パス問題
問題
import文が相対パスになっていると、そのファイルの置き場所が変わるたびにpathを変更しなければならなくなってしまう。
src/components/Foo.tsx
import { RadioButton } from './forms/buttons/RadioButton';
import { SearchBar } from './forms/SearchBar';
import { HomeScreen } from '../screens/HomeScreen';
このようにファイルを移動させると、
src/components/Foo.tsx
↓
src/components/foo/Foo.tsx
pathも変わってしまう。
src/components/foo/Foo.tsx
- import { RadioButton } from './forms/buttons/RadioButton';
- import { SearchBar } from './forms/SearchBar';
- import { HomeScreen } from '../screens/HomeScreen';
+ import { RadioButton } from '../forms/buttons/RadioButton';
+ import { SearchBar } from '../forms/SearchBar';
+ import { HomeScreen } from '../../screens/HomeScreen';
解決策
これが絶対パスになっていると、import文を書くファイルの現在の置き場所に関係なくパスを組み立てることができて、並べて書いた時の可読性も高い。
import { RadioButton } from '~/forms/buttons/RadioButton';
import { SearchBar } from '~/components/forms/SearchBar';
import { HomeScreen } from '~/screens/HomeScreen';
手順
tsconfig.jsonで baseUrl と paths を定義する。
tsconfig.json
+ "baseUrl": "./",
+ "paths": {
+ "~/*": ["*"]
+ },
baseUrl や paths はもちろん任意に決められるので、 ~ を @ にしてもいいし、 プロジェクトルートに src/ ディレクトリがある場合は、 src/ 以下を bathUrl としても良い。
PR
Oisu LLCでは、一緒に働く仲間を募集しています。
少しでも興味を持ってくれた方は、お気軽にご連絡ください！
Discussion