Day 11 Weekly review

[yoorli]

🇶 TypeScript의 동작 원리에 대해 설명해 주세요.

🇶 d.ts 타입 정의파일이 무엇이며, 어떻게 만들 수 있는지 설명하세요

[yoorli]

추가 정보 - 임송이

Q. TypeScript의 타입 시스템이 JavaScript 런타임 성능에 미치는 영향은 무엇인가요?
TypeScript의 타입 시스템은 컴파일 타임에만 존재하며, 트랜스파일 과정에서 모든 타입 정보가 제거됩니다(타입 소거). 따라서 런타임에는 일반 JavaScript와 동일하게 실행되어 성능 오버헤드가 없습니다. 다만, 빌드 시간이 증가할 수 있고, 제너레이터나 데코레이터와 같은 메타프로그래밍 기능 사용 시 추가 코드가 생성될 수 있습니다.

Q. TypeScript의 타입 추론 메커니즘은 어떻게 작동하나요?
TypeScript의 타입 추론은 코드 흐름 분석(flow analysis)을 통해 작동합니다. 변수 초기화, 함수 반환 값, 조건문 내의 타입 가드 등을 분석하여 명시적 타입 선언 없이도 타입을 결정합니다. 또한 변수 사용 위치를 분석하는 문맥적 타이핑(contextual typing)을 적용해 콜백 함수 등에서 매개변수 타입을 추론합니다. 이러한 추론 시스템은 제네릭을 통해 더욱 강화되어, 함수나 클래스가 다양한 타입과 작동하면서도 타입 안전성을 유지할 수 있게 합니다.

Q. TypeScript 컴파일러(TSC)의 내부 구조는 어떻게 되어 있나요?
TypeScript 컴파일러는 크게 파서(Parser), 바인더(Binder), 타입 체커(Type Checker), 에미터(Emitter)로 구성됩니다. 파서는 소스 코드를 AST(추상 구문 트리)로 변환하고, 바인더는 식별자와 선언을 연결하는 심볼 테이블을 구축합니다. 타입 체커는 이 심볼 테이블을 사용해 타입 검사를 수행하고, 마지막으로 에미터가 AST를 JavaScript 코드로 변환합니다. 이 모듈화된 아키텍처 덕분에 컴파일러 API를 통해 프로그래밍 방식으로 컴파일 과정을 제어할 수 있으며, 이는 Babel, ESLint, Prettier 같은 도구와의 통합을 가능하게 합니다.

Q. 모듈 증강(Module Augmentation)과 전역 증강(Global Augmentation)의 차이점은 무엇인가요?
모듈 증강은 기존 모듈에 새로운 타입이나 인터페이스를 추가할 때 사용하며, declare module "모듈명" 구문으로 시작합니다. 이는 특정 라이브러리의 타입 정의를 확장할 때 유용합니다. 반면 전역 증강은 declare global { } 블록을 사용해 전역 네임스페이스에 타입을 추가합니다. 예를 들어, Window 객체나 Array 프로토타입에 커스텀 프로퍼티를 추가할 때 사용합니다. 두 방법 모두 기존 타입 정의를 침해하지 않으면서 확장할 수 있는 방법을 제공하지만, 적용 범위와 임포트 방식에서 차이가 있습니다.

Q. DefinitelyTyped 프로젝트와 @types 패키지의 관계는 무엇인가요?
DefinitelyTyped는 타입 정의 파일을 위한 오픈 소스 저장소로, 커뮤니티가 다양한 JavaScript 라이브러리에 대한 d.ts 파일을 기여하고 관리합니다. @types는 이 저장소의 타입 정의를 npm 패키지로 제공하는 네임스페이스입니다. 예를 들어, @types/react는 React의 타입 정의를 포함합니다. TypeScript 2.0부터는 tsconfig.json의 typeRoots 및 types 옵션을 통해 이러한 패키지를 자동으로 인식하며, npm을 통한 간편한 설치와 버전 관리가 가능합니다. 이 생태계는 TypeScript 채택을 크게 촉진했으며, 대부분의 주요 라이브러리에 대한 타입 지원을 제공합니다.

Q. d.ts 파일에서 타입과 값의 네임스페이스를 어떻게 구분하나요?
TypeScript는 타입 네임스페이스와 값 네임스페이스를 분리하여 관리합니다. interface, type과 같은 구문은 타입 네임스페이스에만 존재하고, 런타임에는 사라집니다. 반면 class, enum, const, namespace는 값 네임스페이스에도 존재합니다. d.ts 파일에서는 declare 키워드를 사용해 값을 정의할 수 있으며, 타입과 값이 동일한 이름을 공유할 수도 있습니다(예: class와 interface). 이러한 이중성을 이해하는 것은 특히 제네릭 클래스 또는 네임스페이스가 포함된 복잡한 라이브러리의 타입 정의를 작성할 때 중요합니다. 예를 들어 React.Component는 값(클래스)이면서 동시에 타입(제네릭 인터페이스)으로 사용됩니다.