Typescript vs. Javascript

JavaScript와 TypeScript는 둘 다 웹 및 기타 환경에서 널리 사용되는 프로그래밍 언어이지만, 설계와 사용 목적에 있어 몇 가지 중요한 차이가 있다.

  • JavaScript는 인터프리터(또는 JIT 컴파일러)에 의해 실행되는 동적 타입의 스크립트 언어로, 유연성과 간편함을 제공하며 브라우저와 Node.js 등에서 기본 언어로 사용된다.
  • TypeScript는 Microsoft에서 개발한 JavaScript의 상위 집합(superset)으로, 정적 타입 시스템과 클래스, 인터페이스, 제네릭 등 강력한 객체지향 프로그래밍(OOP) 기능을 추가하여 대규모 애플리케이션이나 엔터프라이즈 환경에서 코드의 안정성과 유지보수성을 높이는 데 목적이 있다.

JavaScript

JavaScript는 1995년 Brendan Eich에 의해 만들어진 웹 브라우저용 스크립트 언어이다. 원래는 웹 페이지에 상호작용을 추가하기 위해 설계되었지만, 현재는 브라우저 환경 외에도 서버 사이드(Node.js), 모바일 앱 개발(React Native), 데스크톱 애플리케이션(Electron) 등 다양한 환경에서 사용된다.

JavaScript는 다음과 같은 특징을 가지고 있다:

  • 동적 타입 언어: 변수의 타입이 런타임에 결정된다.
  • 프로토타입 기반 객체지향 프로그래밍을 지원한다.
  • 함수형 프로그래밍 패러다임을 지원한다.
  • 단일 스레드 환경에서 비동기 프로그래밍을 위한 이벤트 루프 모델을 사용한다.
  • ES6(ECMAScript 2015) 이후로 많은 현대적 기능이 추가되었다.

JavaScript 코드 예제

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// JavaScript 예제: 사용자 정보 처리
function createUser(name, age, isAdmin) {
    // 동적 타입 - 타입 체크가 런타임에 이루어짐
    if (typeof name !== 'string') {
        throw new Error('이름은 문자열이어야 합니다');
    }
    
    // 객체 생성
    const user = {
        name: name,
        age: age,
        isAdmin: isAdmin,
        createdAt: new Date()
    };
    
    // 메서드 추가
    user.getInfo = function() {
        return `${this.name}은(는) ${this.age}세입니다.`;
    };
    
    return user;
}

// 함수 호출
const user1 = createUser('홍길동', 30, false);
console.log(user1.getInfo());

// 타입 오류는 런타임에 발견됨
try {
    const user2 = createUser(123, '서른', 'yes'); // 타입이 잘못되었지만 컴파일 시점에서는 오류 없음
    console.log(user2.getInfo());
} catch (error) {
    console.error('오류 발생:', error.message);
}

TypeScript

TypeScript는 2012년 Microsoft에서 개발한 JavaScript의 상위 집합(superset) 언어이다. JavaScript의 모든 기능을 포함하면서 정적 타입 시스템을 추가했다. TypeScript 코드는 컴파일되어 JavaScript로 변환된 후 실행된다.

TypeScript의 주요 특징은 다음과 같다:

  • 정적 타입 시스템: 개발 시점에 타입 검사를 수행한다.
  • 인터페이스, 제네릭, 열거형 등 타입 관련 기능을 제공한다.
  • 클래스 기반 객체지향 프로그래밍을 강화했다.
  • 최신 ECMAScript 기능을 지원하며, JavaScript로 트랜스파일된다.
  • 강력한 개발 도구 지원(타입 추론, 코드 자동 완성, 리팩토링 등)

TypeScript 코드 예제

위 예제를 TypeScript로 작성하면 다음과 같다:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// TypeScript 예제: 사용자 정보 처리
// 인터페이스 정의
interface User {
    name: string;
    age: number;
    isAdmin: boolean;
    createdAt: Date;
    getInfo(): string;
}

// 함수에 타입 명시
function createUser(name: string, age: number, isAdmin: boolean): User {
    // 타입 체크는 컴파일 시점에 이루어짐
    // name이 string이 아니면 컴파일 오류가 발생하므로 추가 체크 불필요
    
    // 객체 생성
    const user: User = {
        name,
        age,
        isAdmin,
        createdAt: new Date(),
        getInfo() {
            return `${this.name}은(는) ${this.age}세입니다.`;
        }
    };
    
    return user;
}

// 함수 호출
const user1 = createUser('홍길동', 30, false);
console.log(user1.getInfo());

// 다음 코드는 컴파일 시점에 타입 오류 감지
// const user2 = createUser(123, '서른', 'yes'); // 타입 오류: 컴파일러가 오류 표시

JavaScript와 TypeScript 비교

특성JavaScriptTypeScript
정의웹페이지에 동적 기능을 추가하기 위해 설계된 스크립트 언어JavaScript의 상위 집합(superset)으로, 정적 타입 시스템을 추가한 언어
개발Brendan Eich에 의해 1995년 개발, ECMA International에서 표준화Microsoft에서 2012년 개발, 오픈 소스 프로젝트로 관리
실행 방식인터프리터 언어 (브라우저나 Node.js 환경에서 직접 실행)트랜스파일러 언어 (TypeScript → JavaScript로 컴파일 후 실행)
파일 확장자.js.ts (.tsx for React components)
타입 시스템동적 타입 (런타임에 타입 결정)정적 타입 + 타입 추론 (컴파일 시점에 타입 검사)
타입 선언불필요 (var, let, const로 변수 선언)명시적 타입 선언 가능 (예: let name: string)
타입 안전성낮음 (런타임에 타입 오류 발생 가능)높음 (컴파일 시 타입 오류 감지)
객체지향 기능프로토타입 기반 (ES6부터 class 문법 지원)클래스, 인터페이스, 제네릭, 열거형 등 강화된 OOP 기능
코드 유지보수대규모 프로젝트에서 상대적으로 어려움타입 시스템으로 인해 대규모 프로젝트에서 유지보수 용이
개발 도구 지원기본적인 자동 완성 및 오류 감지강화된 자동 완성, 타입 검사, 리팩토링 도구
학습 곡선상대적으로 낮음JavaScript보다 높음 (타입 시스템 이해 필요)
프로젝트 설정간단함 (별도의 설정 파일 불필요)복잡함 (tsconfig.json 설정 필요)
라이브러리/프레임워크 호환성모든 JavaScript 라이브러리 지원대부분의 JavaScript 라이브러리 지원 (타입 정의 필요, @types/)
빌드 단계필수적이지 않음트랜스파일 과정 필요
컴파일 시간없음 (인터프리터 언어)프로젝트 크기에 따라 컴파일 시간 증가
디버깅런타임 오류 디버깅컴파일 타임 및 런타임 오류 디버깅
성능런타임 성능은 동일 (실행 환경에 따라 다름)런타임 성능은 JavaScript와 동일 (컴파일 결과가 JS이므로)
사용 사례작은 규모의 웹 애플리케이션, 스크립트대규모 애플리케이션, 엔터프라이즈 수준 프로젝트
인기 있는 프레임워크React, Vue, Angular, Express, Next.jsAngular(TypeScript 기반), React(TS 지원), Next.js(TS 지원)
커뮤니티 크기매우 큼 (가장 인기 있는 프로그래밍 언어 중 하나)크지만 JavaScript보다는 작음, 빠르게 성장 중
최신 기능 지원ECMAScript 표준에 따라 브라우저별 지원 차이최신 ECMAScript 기능 조기 지원 (다운레벨 컴파일 가능)

참고 및 출처