【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

#React/TypeScript

7/1/2023

やりたいこと

例えばコンポーネントAaa, Bbb, Cccがあったとして

app/
┣ components/
┃  ┣ Aaa.tsx
┃  ┣ Bbb.tsx
┃  ┗ Ccc.ts
┗ page.tsx

のような構成でpage.tsxからそれぞれをインポートして使うと

tsx

1
2
3

import Aaa from './components/Aaa'
import Bbb from './components/Bbb'
import Ccc from './components/Ccc'

みたいな感じになると思います。

これを

tsx

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です。

tsx

1
2
3

/* 普通にexport */
export const Aaa: React.FC = () => {
（略）

tsx

/* 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にて

tsx

import { Aaa, Bbb, Ccc } from './components'

といった感じでインポートして使えます。

Share this post