File: articles/article-20230701.md1.8Kmarkdown
---
date: tags: [#react-typescript]
---
【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録
やりたいこと
例えばコンポーネントAaa, Bbb, Cccがあったとして
app/
┣ components/
┃ ┣ Aaa.tsx
┃ ┣ Bbb.tsx
┃ ┗ Ccc.ts
┗ page.tsx
のような構成でpage.tsxからそれぞれをインポートして使うと
import Aaa from './components/Aaa'
import Bbb from './components/Bbb'
import Ccc from './components/Ccc'みたいな感じになると思います。
これを
import { Aaa, Bbb, Ccc } from './components'みたいにインポートできるようするための備忘録です。
ディレクトリ構成
最初のやつにindex.tsを追加して以下のようにします。
app/
┣ components/
┃ ┣ Aaa.tsx
┃ ┣ Bbb.tsx
┃ ┣ Ccc.tsx
┃ ┗ index.ts
┗ page.tsx
各コンポーネントのexport
コンポーネントのexportのやり方はとくに特別なことは不要で、普通にexportするかdefault exportでokです。
/* 普通にexport */
export const Aaa: React.FC = () => {
（略）/* default export */
const Bbb: React.FC = () => {
（略）
export default Bbb;index.tsでexportをまとめる
先程のexportしたコンポーネントをまとめます。
書き方はexportしたかdefault exportしたかで変わります。
先程のAaaとBbbに加えて、Cccもdefault exportしたとした場合の例とするとindex.tsを以下のようにします。
/* exportした場合は↓のように書く */
export * from './Aaa'
/* default exportした場合は↓のように書く */
export { default as Bbb } from './Bbb'
export { default as Ccc } from './Ccc'これで先程のようにpate.tsxにて
import { Aaa, Bbb, Ccc } from './components'といった感じでインポートして使えます。
share:
