😲

Typescriptでコンポーネントのインポートを絶対パスで記載する

2022/09/29に公開約700字

VSCodeだとコンポーネントをインポートする際に、相対パスで自動保管してくれてすごく便利。
ですが、プロジェクトが大きくなってくると可読性が悪くなり、インポート元を追うのが大変になってくる。

ということで、絶対パスの書き方を学んだ。
方法は簡単。
プログジェクトルート直下にあるtsconfig.jsonを編集、下記を追記

/tsconfig.json

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"],
      "@/types/*": ["types/*"],
      "@/hooks/*": ["hooks/*"],
    }
  }

インポート文に追記
(例はNext.js初期設定のMyAppコンポーネントにLayoutコンポーネントを追記したもの)

/pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '@/layouts/lauout'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

Layoutコンポートが使えることを確認!!

Discussion

ログインするとコメントできます