【TypeScript／JavaScript】importの起点になるパスを設定する（＋エイリアス）

TypeScriptやJavaScriptな開発環境でimportの起点になるパスを設定したい！

概要

今回の記事では、TypeScriptやJavaScriptな開発環境でimportの起点になるパスを設定する手順を掲載する。

create-react-appで作ったプロジェクトはベースになるパスが設定されておらず、プロジェクト内のコンポーネントなどをimportする際に相対パスでしか設定できないんだけども、大きめのプロジェクトだとパス設定が煩雑になるのでなんとかする！

仕様書

環境

• typescript 5.2.2

手順書

TypeScriptの場合はプロジェクトのルートにあるtsconfig.json（JavaScriptの場合はjsconfig.json）のcompilerOptionsの中でbaseUrlに起点となるパスを設定できる。

下記はsrcを起点とする例。

{
    "compilerOptions": {
        ...
        "baseUrl": "./src"
    },
    ...
}

src/types/AppInfo.tsxをimportする場合はプロジェクトのどこからでも

import { AppInfo } from 'types/AppInfo';

という感じで出来るようになる。

エイリアス

本題ではないんだけども、おまけとしてエイリアスを使ったファイルのimportについても載せる。

/src/assetsに@assetsというエイリアスでアクセスできるようにする例。

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

importはこんな感じ。

import { LogoImage } from '@assets/LogoImage';

まとめ（感想文）

デフォルトでこの設定でよくなくなくなくない？