[TypeScript] 타입스크립트란? TypeScript와 JavaScript의 차이점

타입스크립트란?

타입스크립트(TypeScript, TS)는 마이크로소프트(Microsoft)에서 개발했고, 자바스크립트에 타입을 부여한 언어이다. 

자바스크립트의 확장된 언어라고 볼 수 있다.

자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해줘야 한다. (컴파일을 해야 실행 가능) 

 

자바스크립트는 <script></script> 태그로 직접 작성하면 브라우저가 즉시 실행할 수 있는 인터프리터 언어임. 

타입스크립트는 브라우저가 바로 실행할 수 없고 .ts 파일을 .js 파일로 컴파일 해야 함. 이 변환된 .js 파일을 브라우저에서 실행하는 방식임. 

 

 

JavaScript와 TypeScript의 실행 방식 차이점

언어	실행 방식	브라우저에서 바로 실행 가능한가?
JavaScript	인터프리터 방식	가능
TypeScript	컴파일 후 실행	직접 실행 불가능

 

 

인터프리터 언어와 컴파일러 언어의 차이점

구분	인터프리터 언어	컴파일러 언어
실행 방식	한 줄씩 해석 & 실행	전체 코드를 번역 후 실행
실행 속도	상대적으로 느림	빠름
실행 과정	실행할 때마다 번역	한 번 컴파일하면 실행 가능
언어 종류	JavaScript, Python, PHP	C, C++, Java

 

 

 왜 필요한가? (타입스크립트의 장점)

1. 타입 안정성 (Type Safety)
   • 코드 작성 중에 타입 오류를 사전에 잡아줘서, 런타임 에러를 줄일 수 있음.
   • 예를 들어, number 타입 변수에 string을 할당하면 컴파일 단계에서 오류 발생.
2. 가독성과 유지보수성 향상
   • 코드의 구조가 명확해지고, 타입 정보 덕분에 팀원 간 협업이 쉬워짐.
   • 특히 규모가 큰 프로젝트에서 효과적
3. IDE 지원 & 자동 완성 강화
   • VS Code 같은 IDE에서 자동 완성(IntelliSense), 빠른 오류 감지, 코드 내비게이션 등을 지원해줘서 개발 속도가 향상됨.
4. 객체지향 프로그래밍(OOP) 지원
   • interface, class, enum, abstract class 등 OOP 개념을 활용할 수 있어서 더 체계적인 코드 작성 가능.
5. 최신 자바스크립트 기능 지원
   • ES6+, ES7 등의 최신 자바스크립트 기능을 포함하고 있어 최신 문법을 사용할 수 있음.
   • 또한, 구버전 브라우저에서도 사용할 수 있도록 컴파일 가능.

 

---

 

 

자바스크립트와 타입스크립트의 차이점

타입 시스템	동적 타입(Dynamic Typing)	정적 타입(Static Typing)
런타임 에러	실행 중 오류 발견	컴파일 단계에서 오류 감지
코드 가독성	타입 정보 부족	타입이 명확하여 유지보수 용이
자동 완성 지원	IDE 지원 약함	강력한 자동 완성(IntelliSense)
객체지향(OOP)	제한적 (ES6 클래스 지원)	interface, class, abstract, enum 등 완전한 OOP 지원
트랜스파일링	필요 없음 (바로 실행 가능)	TS → JS 변환(컴파일 필요)

 

 

예제 코드 비교

자바스크립트 (JS)

function add(a, b) { 
	return a + b; // a와 b가 숫자가 아닐 수도 있음
} 

console.log(add(5, "10")); // 결과: "510" (예상과 다름)

 

→  숫자끼리 더해야 하는데, "10"(문자열)이 들어와서 문자열 연결이 발생하는 문제가 생김.

 

 

타입스크립트 (TS)

function add(a: number, b: number): number { 
	return a + b; // 타입이 맞지 않으면 컴파일 단계에서 오류 발생 
} 

console.log(add(5, "10")); // 오류 발생 (Argument of type 'string' is not assignable to parameter of type 'number')

 

→  컴파일 단계에서 오류를 잡아줘서 잘못된 타입의 데이터를 전달하는 실수를 방지할 수 있음.

 

 

 

 

 

Why TypeScript? | 타입스크립트 핸드북

Why TypeScript? | 타입스크립트 핸드북