✔ TypeScript 동작 원리
🚀 TypeScript란?
TypeScript는 JavaScript에 타입 시스템을 추가한 프로그래밍 언어로, 정적 타입 검사를 통해 코드의 오류를 사전에 발견하고, 코드의 가독성 및 유지보수성을 높인다. TypeScript는 JavaScript의 상위 집합(Superset)으로 모든 JavaScript 코드를 그대로 포함하고 있으며, 작성된 TypeScript 코드는 브라우저에서 실행되기 위해 JavaScript로 변환(컴파일)된다.
🔨 동작 원리
TypeScript의 동작 원리는 크게 두 가지 과정으로 나눌 수 있다.
1. 타입 검사 (Type Checking)
TypeScript의 가장 큰 특징은 코드에 정적 타입을 부여해 코드를 컴파일하기 전 타입 오류를 사전에 검출하는 기능이다.
- TypeScript는 코드 작성 시점에 데이터의 타입(숫자, 문자열, 객체 등)을 미리 선언하거나, 타입 추론(Type Inference)을 통해 변수의 타입을 유추
- TypeScript는 컴파일 단계에서 코드가 정의된 타입과 일치하지 않는 방식으로 사용되는지 검토하여 타입 오류를 검사한다. 예를 들어, 함수의 매개변수에 숫자 타입을 지정했을 경우, 문자열이 전달되면 오류를 발생시킨다.
이 타입 검사 과정을 런타임에서 발생할 수 있는 오류를 코드 작성 단계에서 미리 방지할 수 있어, 안정성과 신뢰성이 높은 코드를 작성할 수 있다.
function add(a: number, b: number): number {
return a + b;
}
// 오류 발생 - 'a'와 'b'는 숫자여야 하지만 문자열이 전달됨
add("1", "2");위 코드에서
add함수의 매개변수a와b는 숫자 타입으로 지정되어 있으므로, 문자열을 전달하려고 하면 타입 오류가 발생한다.
2. 트랜스파일 (Transpile) 과정
TypeScript를 JavaScript로 변환
TypeScript 코드는 브라우저가 직접 이해할 수 없기 때문에, JavaScript로 변환하는 트랜스파일(transpile) 과정이 필요하다. TypeScript 컴파일러(tsc)는 TypeScript 코드를 분석하고 타입 검사를 한 후, 타입 관련 정보를 제거하고 순수 JavaScript 코드로 변환한다. 이때, TypeScript의 최신 문법은 컴파일러 옵션에 따라 지원하는 JavaScript 표준(ES5, ES6 등)에 맞게 변환된다.
// TypeScript 코드
const greeting: string = "Hello, TypeScript!";
console.log(greeting);
// 컴파일된 JavaScript 코드
var greeting = "Hello, TypeScript!";
console.log(greeting);위 예제에서 TypeScript 코드의
const greeting: string구문은 컴파일 시점에var greeting으로 변환되어 JavaScript 코드로 바뀐다.
🍖 TypeScript의 컴파일 옵션
TypeScript 컴파일러는 다양한 옵션을 제공하여, 프로젝트 환경에 따라 컴파일 방식과 결과를 조정할 수 있다. 에를 들어, tsconfig.json 파일을 사용하여 TypeScript 컴파일러의 동작을 설정할 수 있다.
target: 컴파일 결과를 원하는 JavaScript 버전으로 설정 (예: ES5, ES6)strict: 엄격한 타입 검사를 활성화하여 안전한 코드를 작성하도록 지원outDir: 컴파일된 JavaScript 파일의 저장 위치를 지정
// tsconfig.json 예시
{
"compilerOptions": {
"target": "ES5",
"strict": true,
"outDir": "./dist"
}
}✨ TypeScript의 장점
- 코드 안정성 증가: 타입 검사를 통해 오류를 사전에 방지할 수 있어 코드의 안정성이 높아짐
- 가독성 및 유지보수성: 타입이 명시되어 있어 코드의 의도가 명확하게 드러나며, 유지보수 시에도 오류가 발생할 가능성이 줄어듦
- 도구 지원 강화: TypeScript는 IDE와의 호환성이 좋으며, 자동 완성, 코드 탐색 기능을 향상 시킴
✍ 요약
🤜 TypeScript는 이러한 특성 덕분에 특히 대규모 프로젝트에서 안정성과 개발 속도를 향상시키는 도구로 인기를 끌고 있다.🔥
