답변

TypeScript는 JavaScript의 두 가지 주요 모듈 시스템인 CommonJS와 ES 모듈을 지원하여 import 및 export 키워드를 사용하여 코드를 구성할 수 있습니다. TypeScript의 차이점은 값과 마찬가지로 내보내고 가져올 수 있는 타입 선언이 있다는 것입니다.

예를 들어, 인터페이스를 내보낼 수 있습니다:

// types.ts
export interface User {
  id: number;
  name: string;
}
// index.ts
import { User } from './types';
const u: User = { id: 1, name: 'Alice' };

또한 export type, export interface, import type이 지원되며, 이는 최종 번들에 코드를 포함하지 않고 오직 타입만 가져올 수 있게 되어 빌드를 최적화합니다:

import type { User } from './types';

중요한 특징: TypeScript에서는 최종 JavaScript에 포함되지 않을 타입만 내보낼 수 있습니다.

함정 질문

import { SomeType } from './file'와 import type { SomeType } from './file'의 차이는 무엇인가요?

잘못된 답변: 둘 다 같은 일을 합니다.

올바른 답변: import { SomeType } ...는 전체 모듈이 가져와져서 결과 JavaScript에 포함될 수 있으며, 이는 단지 타입일지라도 그렇습니다. import type { SomeType } ...는 컴파일 단계에서 오직 타입만 가져오도록 보장하여, 어떠한 부수 효과나 코드도 출력되지 않습니다.

주제에 대한 세부사항을 몰라서 발생한 실제 오류의 예시

이야기

대규모 프로젝트에서 팀은 부수 효과가 있는 모듈로부터 타입을 일반 가져오기를 통해 import { SomeType } ...로 가져왔습니다. 그 결과, 프로덕션 빌드에 불필요한 의존성과 부수 효과가 포함되어 버그가 발생하고 번들 크기가 증가했습니다.

이야기

개발자는 타입 선언을 하지 않고 글로벌 변수를 통해 글로벌 타입을 정의하기로 결정하였고, 우연히 같은 이름으로 타입과 값을 내보냈습니다. 이로 인해 여러 파일에서 이름 충돌이 발생했으며, TypeScript 업데이트 후 빌드가 실패했습니다.

이야기

팀은 export/import type의 특징을 구별하지 못하고 타입을 데이터와 함께 내보냈습니다. 그 결과, 트리 쉐이킹 도구가 죽은 코드를 제외하지 못해 번들이 증가했습니다.

TypeScript에서 모듈 시스템은 어떻게 작동하며, JavaScript 모듈과는 어떤 점이 다른가요? TypeScript의 타입 선언과 내보내기 기능의 특징은 무엇인가요?

답변

함정 질문

주제에 대한 세부사항을 몰라서 발생한 실제 오류의 예시