타입스크립트 (TypeScript)

Table of Contents

1. 타입스크립트 개요

타입스크립트(TypeScript)는 마이크로소프트(Microsoft)가 개발한 자바스크립트(JavaScript)의 상위 집합(Superset) 언어입니다.
즉, 자바스크립트에 정적 타입(Static Type)을 추가하고, 최신 ECMAScript(ES) 기능을 지원하도록 확장한 언어입니다.
작성된 코드는 결국 자바스크립트로 컴파일되므로, 모든 브라우저와 Node.js 환경에서 실행할 수 있습니다.

2. 등장 배경

자바스크립트는 동적 타입 언어로, 코드가 실행되기 전까지는 타입 오류를 발견하기 어렵습니다.
대규모 애플리케이션을 개발할 때 유지보수성과 가독성이 떨어지는 문제를 해결하기 위해 등장했습니다.
특히 Angular, React, Vue와 같은 프론트엔드 프레임워크에서 널리 사용되며, 백엔드(Node.js)에서도 적용되고 있습니다.

3. 주요 특징

정적 타입 시스템
- 변수, 함수 매개변수, 반환값 등에 타입을 명시할 수 있습니다.
- 컴파일 단계에서 타입 오류를 미리 잡을 수 있어 안정성이 높습니다.
자바스크립트 상위 호환
- 기존 자바스크립트 코드도 그대로 동작합니다.
- 점진적으로 타입을 추가할 수 있습니다.
최신 ECMAScript 지원
- ES6+ 문법(클래스, 모듈, async/await 등)을 지원하며, 필요 시 이전 버전의 자바스크립트로 트랜스파일링 가능합니다.
객체 지향 프로그래밍 지원
- 클래스, 인터페이스, 제네릭(Generic) 같은 기능을 제공하여 대규모 프로젝트에 적합합니다.
IDE 지원 강화
- VS Code와 같은 에디터에서 자동완성(IntelliSense), 코드 리팩토링, 디버깅을 쉽게 할 수 있습니다.

4. 장점과 단점

장점

컴파일 단계에서 오류를 미리 발견 가능
대규모 프로젝트에서 유지보수 용이
풍부한 IDE 지원 (자동완성, 타입 추론)
객체 지향 패턴 및 최신 JS 기능 활용 가능

단점

학습 곡선이 필요 (특히 자바스크립트 초보자에게 부담)
컴파일 단계가 필요하여 설정이 다소 번거로움
작은 규모의 프로젝트에서는 오히려 과도한 설정이 될 수 있음

5. 타입스크립트 vs 자바스크립트 비교표

구분	자바스크립트 (JavaScript)	타입스크립트 (TypeScript)
언어 성격	동적 타입 언어 (Dynamic Typing)	정적 타입 언어 (Static Typing, JS 상위 집합)
타입 검사	런타임에서 오류 확인	컴파일 단계에서 오류 확인
코드 실행	브라우저, Node.js에서 직접 실행	`tsc`(TypeScript Compiler)로 JS 변환 후 실행
지원 문법	ES 표준 기반 (ECMAScript)	ES 표준 + 클래스, 인터페이스, 제네릭 등 확장 기능
규모 적합성	소규모/중규모 프로젝트에 적합	대규모/복잡한 프로젝트에 유리
유지보수	타입 추론 부족 → 버그 발견 어려움	타입 정의로 인해 유지보수 용이
IDE 지원	기본 자동완성, 제한적	풍부한 IntelliSense, 리팩토링, 타입 기반 자동완성
학습 난이도	배우기 쉬움	JS 기반 지식 + 타입 시스템 학습 필요
사용 예시	간단한 웹사이트, 스크립트	대규모 웹앱, 서버사이드(Node.js), 기업용 프로젝트

6. 사용 사례

프론트엔드 개발: Angular는 기본적으로 TypeScript 기반이며, React와 Vue에서도 널리 사용됩니다.
백엔드 개발: Node.js 기반 서버 개발 시 Express, NestJS 같은 프레임워크와 함께 활용됩니다.
대규모 애플리케이션: 기업 환경에서 수십~수백 명이 협업하는 프로젝트에 적합합니다.

7. 예시 코드

// 변수에 타입 지정
let name: string = "홍길동";
let age: number = 30;
let isAdmin: boolean = true;

// 함수에 타입 지정
function add(a: number, b: number): number {
  return a + b;
}

// 인터페이스
interface User {
  id: number;
  username: string;
}

const user: User = {
  id: 1,
  username: "itstack",
};