타입스크립트의 모듈
이 기사는 타입스크립트의 모듈에 대해 설명합니다.
YouTube Video
타입스크립트의 모듈
타입스크립트의 모듈은 코드 재사용성과 유지보수를 향상시키는 데 중요한 기능입니다. 자바스크립트와 마찬가지로 타입스크립트도 ECMAScript 2015 (ES6) 모듈 시스템을 기반으로 하지만, 타입스크립트의 타입 시스템을 활용할 수 있다는 점이 주요 특징입니다.
모듈이란 무엇인가요?
모듈은 관련된 코드를 하나의 단위로 묶어 다른 파일에서 가져와 재사용할 수 있도록 하는 시스템입니다. 타입스크립트에서는 파일마다 스코프가 생성되어 코드를 캡슐화하며, 다른 파일에 영향을 주지 않도록 합니다. 이는 코드 충돌을 방지하고 유지보수를 용이하게 합니다.
내부 모듈과 외부 모듈
- 내부 모듈 (네임스페이스): 타입스크립트 1.5 및 이전에서 사용되던 모듈 정의 방식으로, 현재는 권장되지 않습니다. 현재는 '네임스페이스'로 취급됩니다.
- 외부 모듈: 현재 표준이며, ES6 모듈 시스템을 기반으로 합니다. 이 섹션은 주로 외부 모듈을 설명합니다.
모듈을 내보내는 방법
모듈을 생성할 때 외부에서 접근할 수 있도록 내보내는 작업이 필요합니다. 타입스크립트에서는 export 키워드를 사용하여 값, 함수, 클래스 등을 내보낼 수 있습니다. 주로 두 가지 유형의 내보내기가 있습니다.
명명된 내보내기
여러 개를 내보낼 때 사용되며, 가져오는 쪽에서 특정 항목만 선택하여 사용할 수 있습니다.
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}기본 내보내기
모듈 전체에 단일 기본 내보내기를 설정하려는 경우 사용됩니다. 기본 내보내기는 이름 없이 내보내지며, 가져오는 쪽에서 아무 이름으로나 받을 수 있습니다.
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}모듈 가져오기 방법
모듈을 사용하려면, import 키워드를 사용하여 모듈 내에서 값, 함수, 클래스 등을 가져옵니다.
명명된 임포트
명명된 익스포트에서 특정 요소를 가져오려면 중괄호 {}를 사용합니다.
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);기본 임포트
기본 익스포트를 임포트할 때는 어떤 이름으로든 받을 수 있습니다.
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);임포트 별칭
이름 충돌을 피하거나 긴 이름을 줄이기 위해 별칭(alias)으로 임포트할 수 있습니다.
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);모듈과 네임스페이스의 차이점
네임스페이스(namespace)는 초기 TypeScript에서 코드를 그룹화하기 위해 사용된 내부 모듈 구조입니다. 그러나 현재는 ES6 모듈이 권장되며 네임스페이스는 거의 필요하지 않습니다.
네임스페이스는 동일한 파일 내 또는 여러 파일에 걸쳐 정의될 수 있으며, 전역적으로 확장될 수 있으므로 종속성을 관리하기 어려워질 수 있습니다. 반대로, 모듈은 파일마다 별도의 스코프를 가지며 명확한 종속성을 가지고 있어 보다 현대적이고 안전한 방법입니다.
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);TypeScript 모듈 해석
TypeScript에는 모듈을 해석하는 두 가지 전략이 있습니다.
- Node 모듈 해석: Node.js 환경에서 사용되는 표준 해석 방법으로,
node_modules폴더를 검색하여 모듈을 해석합니다. - 클래식 모듈 해석: TypeScript 자체 해석 방법으로 더 유연하게 검색을 수행하지만, 현재는 일반적으로 사용되지 않습니다.
일반적으로 Node 모듈 해석이 사용되며, 설정 파일에서 별도로 명시하지 않는 한 기본적으로 활성화됩니다.
실용적인 예제
마지막으로, 모듈을 사용하여 계산 함수를 구현하고 재사용하는 예제를 보여줍니다.
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);요약
TypeScript 모듈 시스템은 코드를 체계적으로 구성하고, 재사용성을 높이며, 유지보수성을 향상시키는 강력한 도구입니다. ES6 모듈을 기반으로 한 외부 모듈의 사용이 권장되며, export와 import 키워드를 사용하면 모듈을 쉽게 내보내고 가져올 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.