[typescript] Re-export

typescript에서는 Re-export로 한곳에 모아서 export를 할 수 있다.

Example

directory 구조

.
├── App.tsx
├── components
│   ├── Layout.tsx
│   ├── Main.tsx
│   └── index.ts
└── index.tsx

Re-export

export 할 때는, named export를 해야한다. (default로 하닌깐 error가 발생하였다.)

// components/Main.tsx
export const Main: React.FC = () => {
  return (
    <div className='main-content'>
      <div>Main Content</div>
    </div>
  );
};

// components/index.ts
export * from './Layout';
export * from './Main';

import

index.ts에서 named import를 한다.

import { Main } from '.';

export const Layout: React.FC = () => {
  return (
      <div>
          <Main />
      </div>
  );
};

ReferenceError

• 이때 주의해야 할 점은, Re-export 된 것을 바로 가져오려고 하면, 에러가 발생한다.
• initialize를 하기 전에 access를 했다고 console에 에러가 나타난다.

// App.tsx
import { Layout } from './components/Layout'; // 직접 가져오려고 하는 경우 - 에러발생

function App() {
  return (
    <div>
      <Layout />
    </div>
  );
}

export default App;

// ------------------------------------------------------------------
import { Layout } from './components'; // index.ts 에서 가져옴 - 에러 없음

function App() {
  return (
    <div>
      <Layout />
    </div>
  );
}

export default App;

에러메시지

Uncaught ReferenceError: Cannot access 'Layout' before initialization
    at Module.Layout (profile/static/js/main.chunk.js:259)