[TYPESCRIPT] TypeScript란 무엇인가? - JavaScript와의 차이점 완전 정리

TypeScript는 최근 몇 년 사이 웹 프론트엔드와 백엔드 모두에서 빠르게 표준으로 자리 잡은 언어입니다. JavaScript 기반의 대규모 프로젝트를 개발하면서 발생하는 문제를 해결하기 위해 만들어졌으며, 코드의 안정성과 생산성을 높이는 핵심 도구로 활용되고 있습니다.

TypeScript의 개념과 JavaScript와의 주요 차이점을 중심으로 정리하겠습니다.

 

1. TypeScript란?

TypeScript는 Microsoft가 개발한 오픈소스 프로그래밍 언어로, JavaScript에 정적 타입(Static Typing)과 객체지향 프로그래밍 기능을 추가한 언어입니다. 즉, JavaScript의 상위집합(Superset)으로서 모든 JavaScript 코드를 그대로 사용할 수 있습니다.

TypeScript의 주요 특징은 다음과 같습니다.

• 정적 타입 검사: 변수나 함수의 타입을 명시적으로 선언 가능
• 컴파일 언어: 브라우저가 직접 실행하지 않으며, tsc 컴파일러를 통해 JavaScript로 변환
• 대규모 프로젝트에 유리: 코드 자동 완성, 타입 추론, 리팩토링 지원 강화
• JavaScript 100% 호환: 기존 JS 코드 위에 점진적으로 적용 가능

 

2. TypeScript 코드 예시

아래는 동일한 기능을 하는 JavaScript와 TypeScript 코드 비교입니다.

JavaScript 코드

function add(a, b) {
  return a + b;
}

console.log(add("2", 3)); // "23" (문자열 연결로 의도치 않은 결과)

TypeScript 코드

function add(a: number, b: number): number {
  return a + b;
}

console.log(add("2", 3)); // ❌ 컴파일 에러 발생

TypeScript에서는 정적 타입 검사 덕분에 런타임 이전에 오류를 발견할 수 있습니다. 이러한 타입 안정성(Type Safety)은 대규모 프로젝트에서 버그를 줄이고 유지보수를 쉽게 만들어줍니다.

 

3. TypeScript와 JavaScript의 주요 차이점

① 타입 시스템 (Type System)

JavaScript는 동적 타입 언어(Dynamically Typed)입니다. 변수의 타입이 실행 중(runtime)에 결정되므로 예기치 못한 오류가 발생할 수 있습니다.

반면, TypeScript는 정적 타입 언어(Statically Typed)로 컴파일 시점에 타입을 검사합니다.

let name: string = "John";
name = 123; // ❌ 오류 발생

이처럼 코드 작성 시점에서 타입 불일치를 미리 잡아낼 수 있습니다.

 

② 컴파일(Compile) 과정

JavaScript는 인터프리터 언어이므로 브라우저에서 바로 실행됩니다. 반면 TypeScript는 트랜스파일(Transpile) 과정을 거쳐 순수 JavaScript 코드로 변환된 후 실행됩니다.

# TypeScript 파일을 JavaScript로 컴파일
tsc app.ts

# 결과물: app.js 생성

이 덕분에 TypeScript는 최신 ECMAScript 기능을 안전하게 사용할 수 있습니다.

 

③ 타입 추론(Type Inference)

모든 변수에 타입을 일일이 선언하지 않아도, TypeScript 컴파일러가 타입을 자동으로 추론합니다.

let age = 30; // number 타입으로 자동 추론
age = "30";   // ❌ 컴파일 에러

이 기능 덕분에 TypeScript는 코드의 안전성을 확보하면서도 JavaScript처럼 간결하게 작성할 수 있습니다.

 

④ 인터페이스와 제네릭 (Interface / Generics)

TypeScript는 JavaScript에는 없는 고급 타입 시스템을 제공합니다.

interface User {
  id: number;
  name: string;
}

function printUser<T extends User>(user: T): void {
  console.log(`ID: ${user.id}, Name: ${user.name}`);
}

printUser({ id: 1, name: "Alice" });

이러한 기능은 대규모 프로젝트에서 객체 구조를 명확하게 정의하고, 컴파일 타임에 타입 안정성을 유지하는 데 큰 도움을 줍니다.

 

⑤ 클래스 기반 객체지향 지원

TypeScript는 ES6 클래스 문법을 확장하여 추상 클래스, 접근 제한자(private, public, protected) 등을 지원합니다.

abstract class Shape {
  constructor(public name: string) {}
  abstract getArea(): number;
}

class Circle extends Shape {
  constructor(name: string, private radius: number) {
    super(name);
  }
  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle("Circle", 10);
console.log(circle.getArea());

이처럼 객체지향 설계 원칙을 적용할 수 있다는 점은 JavaScript와의 큰 차이점입니다.

 

4. TypeScript의 장점

• 컴파일 단계에서 오류 감지 → 런타임 오류 감소
• IDE 지원 강화 (자동완성, 타입 힌트, 리팩토링)
• 대규모 프로젝트 관리에 유리 → 협업 시 유지보수성 향상
• 최신 ECMAScript 기능 선제 지원
• JavaScript로 100% 변환 가능 → 점진적 도입 가능

 

5. TypeScript의 단점 및 고려사항

• 초기 설정과 컴파일 환경 구축 필요
• 작은 규모의 프로젝트에서는 과도한 복잡도 유발 가능
• 빌드 과정이 추가되므로 개발 속도가 약간 느려질 수 있음
• 타입 정의 파일(@types)이 없는 라이브러리는 직접 선언해야 함

하지만 이러한 단점은 규모가 커질수록 상대적으로 작아지며, 유지보수 비용 절감 효과가 훨씬 큽니다.

 

6. 실무에서의 적용 사례

TypeScript는 이제 대부분의 프레임워크에서 기본적으로 지원됩니다.

• React / Next.js: 컴포넌트 Props, State의 타입 안정성 확보
• Angular: TypeScript 기반 프레임워크로 설계됨
• NestJS: TypeScript를 이용한 서버사이드 프레임워크 (Node.js 기반)
• Vue 3: Composition API에서 TypeScript 완벽 지원

즉, 프론트엔드와 백엔드 모두에서 TypeScript는 사실상 표준 언어로 자리 잡았습니다.

 

 

---

 

TypeScript는 단순히 JavaScript를 “더 엄격하게 만든 언어”가 아닙니다. 코드의 신뢰성, 유지보수성, 생산성을 모두 향상시키는 개발 도구입니다. JavaScript와 완벽하게 호환되므로, 기존 프로젝트에도 점진적으로 도입할 수 있습니다.