TS 3

• TS 3
  • re-export
    • 1. Named Exports 재수출
    • 2. Export * as
    • 3. Export All from
    • 4. Export와 함께 재수출
    • 5. Re-exporting as Default Export
    • 6. Aggregating Multiple Modules
  • import type vs 일반 import

re-export

1. Named Exports 재수출

기존 모듈에서 특정 이름으로 내보낸 항목을 재수출하며, default export도 포함합니다.

// moduleA.ts
export const foo = () => { /* ... */ };
export const bar = () => { /* ... */ };
const defaultFunction = () => { /* ... */ };
export default defaultFunction;

// moduleB.ts
export { foo, bar } from './moduleA';
export { default as defaultFunction } from './moduleA';

// 다른 파일에서 사용할 때
import { foo, bar, defaultFunction } from './moduleB';

2. Export * as

모든 내보내기 항목을 하나의 네임스페이스로 재수출하며, default export도 포함합니다.

// moduleA.ts
export const foo = () => { /* ... */ };
export const bar = () => { /* ... */ };
const defaultFunction = () => { /* ... */ };
export default defaultFunction;

// moduleB.ts
export * as A from './moduleA';

// 다른 파일에서 사용할 때
import { A } from './moduleB';
A.default(); // defaultFunction 호출
A.foo();
A.bar();

3. Export All from

모든 내보내기 항목을 재수출하며, default export도 포함합니다.

// moduleA.ts
export const foo = () => { /* ... */ };
export const bar = () => { /* ... */ };
const defaultFunction = () => { /* ... */ };
export default defaultFunction;

// moduleB.ts
export * from './moduleA';
export { default } from './moduleA';

// 다른 파일에서 사용할 때
import defaultFunction, { foo, bar } from './moduleB';

4. Export와 함께 재수출

다른 모듈의 내보내기 항목을 포함하여 새로운 항목을 추가로 내보내며, default export도 포함합니다.

// moduleA.ts
export const foo = () => { /* ... */ };
export const bar = () => { /* ... */ };
const defaultFunction = () => { /* ... */ };
export default defaultFunction;

// moduleB.ts
export * from './moduleA';
export { default } from './moduleA';
export const baz = () => { /* ... */ };

// 다른 파일에서 사용할 때
import defaultFunction, { foo, bar, baz } from './moduleB';

5. Re-exporting as Default Export

특정 항목을 기본 내보내기로 재수출하며, 기존 default export도 포함합니다.

// moduleA.ts
const foo = () => { /* ... */ };
export default foo;

// moduleB.ts
const bar = () => { /* ... */ };
export default bar;

// moduleC.ts
export { default as foo } from './moduleA';
export { default as bar } from './moduleB';

// 다른 파일에서 사용할 때
import { foo, bar } from './moduleC';

6. Aggregating Multiple Modules

여러 모듈을 한 곳에서 재수출하며, default export도 포함합니다.

// moduleA.ts
export const foo = () => { /* ... */ };
const defaultFunctionA = () => { /* ... */ };
export default defaultFunctionA;

// moduleB.ts
export const bar = () => { /* ... */ };
const defaultFunctionB = () => { /* ... */ };
export default defaultFunctionB;

// index.ts
export { foo } from './moduleA';
export { default as defaultFunctionA } from './moduleA';
export { bar } from './moduleB';
export { default as defaultFunctionB } from './moduleB';

// 다른 파일에서 사용할 때
import { foo, bar, defaultFunctionA, defaultFunctionB } from './index';

이 예제들은 default export를 고려하여 각 방법에 맞게 수정된 버전입니다.

import type vs 일반 import

1. import type

• 순수하게 타입 정보만 가져오며, 런타임에는 완전히 제거(타입 체킹을 위한 컴파일 타임에만 사용)

• 번들 크기 감소

2. 일반 import

• 실제 값과 타입 정보 모두를 가져옴 > 런타임에도 코드가 남아있다.
• 실제 구현이 필요한 경우 사용합니다

// 타입으로만 사용될 경우
import type { Message } from "ai";
const messages: Message[] = []; // OK
const message = new Message(); // 컴파일 에러! Message는 타입으로만 존재  

// 실제 구현이 필요한 경우
import { Message } from "ai";
const messages: Message[] = []; // OK
const message = new Message(); // OK, 실제 구현체를 사용할 수 있음  

// 일부만 type으로 가져오는 경우  
import { useEffect, useRef, type RefObject } from "react";