[React][TypeScript]絶対パスでimportできるようにする

概要

• create-react-appで作ったTypeScriptプロジェクトで絶対パスでファイルをimportできるようにする

手順

環境変数の設定

• .envに記載するか起動スクリプトに追加する

.env

NODE_PATH=.

package.json

{
  // ...
  "scripts": {
    "start": "NODE_PATH=. react-scripts start",
    "build": "NODE_PATH=. react-scripts build",
    "test": "NODE_PATH=. react-scripts test",
    // ...
  },
  // ...
}

tsconfig.paths.jsonの作成

tsconfig.paths.json

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

tsconfig.jsonへ設定追加

tsconfig.json

{
  // ...
  "extends": "./tsconfig.paths.json",
  // ...
}

結果

• 以下のように絶対パスでimportできるようになる
• VSCodeに補完もちゃんと効く

App.tsx

// ...
import Button from 'src/components/Button'
// ...