【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

1import Aaa from './components/Aaa'
2import Bbb from './components/Bbb'
3import Ccc from './components/Ccc'

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

これを

tsx

1import { 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/* 普通にexport */
2export const Aaa: React.FC = () => {
3（略）

tsx

1/* default export */
2const Bbb: React.FC = () => {
3（略）
4export default Bbb;

index.tsでexportをまとめる

先程のexportしたコンポーネントをまとめます。
書き方はexportしたかdefault exportしたかで変わります。
先程のAaaとBbbに加えて、Cccもdefault exportしたとした場合の例とするとindex.tsを以下のようにします。

1/* exportした場合は↓のように書く */
2export * from './Aaa'
3/* default exportした場合は↓のように書く */
4export { default as Bbb } from './Bbb'
5export { default as Ccc } from './Ccc'

これで先程のようにpate.tsxにて

tsx

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

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

Share this post