非相対パスでimportした

何をしたのか

これを参考に非相対パス(~/*)の形でimportをできるように設定した。

モジュール解決とは何か

importが何を参照するのかを解決するために、コンパイラを利用するプロセス

相対importと非相対import

相対importは / や ./ や ../ などで始まるやつ

import {} from "../foo"
import {} from "./bar"

非相対importは基本的にこれ以外のやつ

import React from "react"
import Sute from "hage"

めっちゃざっくり非相対importはどのように解決されるか

大きく2つの方法がある。それはNodeとクラシックである。デフォルトはNode。

tsconfigの"module"や"moduleResolution"で設定可能。

非相対importの場合は基本的にまずそのディレクトリの node_modules を探してその中にあるパッケージを探す。
そして見つからなかったら、ディレクトリチェーン上(現在のディレクトリの1つ上、そのまた上...)から node_modules を見つけようとする。

TypeScriptだとどうなるか

TSも基本的には同じ。ただ、TS特有のファイルがあったりするので若干違う。省略。
そして、設定によっても若干変わるところがある。

baseUrl

tsconfigで設定できる。
baseUrlはコンパイラにモジュールの入手先を教える。
tsでの非相対importはbaseUrlからの相対的であると仮定する。
相対importに対しての影響はない。

paths

tsconfigで設定できる。
パスをマッピングしてくれる。
相対importだと深くなってしまうところを、非相対importでbaseUrlから相対的な設定をすることができる。

tsconfig.json

{
  "baseUrl": "./src"
  "paths": {
      "~/*": ["*"]
    }
}

import モジュール from "~/src直下のディレクトリやファイル/..."

参照