JavaScript vs. TypeScript 특징과 차이점이 뭐에요?

1. 기본 개념

JavaScript:

• 특징: 동적 타입 언어로, 웹 브라우저에서 기본적으로 실행됨.

// JavaScript - 간단한 함수
function greet(name) {
    return "Hello, " + name;
}
console.log(greet("World"));

 

TypeScript:

• 특징: 정적 타입 언어로, JavaScript의 상위 집합. 컴파일 시 타입 검사를 수행함.

// TypeScript - 간단한 함수
function greet(name: string): string {
    return `Hello, ${name}`;
}
console.log(greet("World"));

 

 

 

2. 타입 시스템

JavaScript:

• 동적 타입: 변수의 타입을 명시하지 않음. 런타임에 타입이 결정됨.

let message = "Hello, World";
message = 123;  // 허용됨

TypeScript:

• 정적 타입: 변수의 타입을 명시함. 컴파일 타임에 타입이 결정됨.

let message: string = "Hello, World";
message = 123;  // 오류 발생

 

 

 

3. 코드 에디터 지원

JavaScript:

• 기본 지원: 대부분의 코드 에디터에서 기본적인 문법 강조 및 자동 완성 기능을 제공.
• 예시: Visual Studio Code에서 JavaScript 파일 편집.

TypeScript:

• 향상된 지원: 코드 에디터에서 강력한 타입 검사 및 자동 완성 기능을 제공.
• 예시: Visual Studio Code에서 TypeScript 파일 편집 시 변수 타입에 따라 자동 완성 제공.

 

 

 

4. 컴파일 및 빌드 과정

JavaScript:

• 해석 언어: 코드를 작성 후 즉시 실행 가능.

console.log("JavaScript 코드는 바로 실행됩니다.");

TypeScript:

• 컴파일 언어: 작성한 코드를 JavaScript로 컴파일한 후 실행.

// TypeScript 코드를 컴파일하여 JavaScript로 변환
tsc example.ts  // TypeScript 컴파일 명령어

 

5. ES6+ 기능 지원

JavaScript:

• ES6 이후 버전: 최신 표준 기능을 지원하지만 브라우저 호환성을 고려해야 함.

// 화살표 함수
const add = (a, b) => a + b;
console.log(add(2, 3));

 

TypeScript:

• 모던 자바스크립트: 최신 JavaScript 기능을 기본적으로 지원하며, 타입 시스템과 결합하여 사용.

// 화살표 함수와 타입 지정
const add = (a: number, b: number): number => a + b;
console.log(add(2, 3));

 

 

 

6. 인터페이스 및 타입 선언

JavaScript:

• 인터페이스 없음: 타입 선언을 위한 인터페이스 개념이 없음.

// 객체 리터럴
const user = {
    name: "John",
    age: 30
};

TypeScript:

• 인터페이스: 타입 선언을 위한 인터페이스와 타입 별칭 제공.

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

const user: User = {
    name: "John",
    age: 30
};

 

 

 

7. 커뮤니티 및 생태계

JavaScript:

• 광범위한 생태계: 풍부한 라이브러리와 프레임워크.
• 예시: React, Angular, Vue.js 등 다양한 프레임워크와의 호환성.

TypeScript:

• 급성장하는 생태계: 많은 프로젝트가 TypeScript를 도입하고 있으며, JavaScript 라이브러리와 호환 가능.
• 예시: Angular는 TypeScript를 기본 사용, React와 Vue.js에서도 TypeScript 지원.

 

 

 

8. 에러 검출 및 디버깅

JavaScript:

• 런타임 에러: 실행 중에 에러가 발생할 때만 검출.

// 런타임 에러 예시
function divide(a, b) {
    return a / b;
}
console.log(divide(4, 0));  // Infinity 출력, 오류 검출 어려움

TypeScript:

• 컴파일 타임 에러: 코드 작성 시점에서 에러를 검출 가능.

// 컴파일 타임 에러 예시
function divide(a: number, b: number): number {
    if (b === 0) {
        throw new Error("Cannot divide by zero");
    }
    return a / b;
}
console.log(divide(4, 0));  // 컴파일 시점에서 오류 검출