타입스크립트(TypeScript)와 자바스크립트(JavaScript) 문법적 차이 7가지

by

타입스크립트(TypeScript)와 자바스크립트(JavaScript) 문법적 차이 7가지

통상 타입스크립트는 자바스크립트보다 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 해줍니다. 타입을 명시하고, 인터페이스를 정의하며, 코드 작성 시점에서 오류를 발견할 수 있어, 대규모 애플리케이션 개발에 유리합니다.

1. 타입 시스템

JavaScript: 자바스크립트는 동적 타이핑(dynamic typing)을 사용합니다. 이는 변수의 타입을 명시적으로 지정하지 않으며, 값에 따라 타입이 자동으로 할당됩니다.

let message = "Hello, world!";
message = 42;  // 가능: string에서 number로 타입 변경

TypeScript: 타입스크립트는 정적 타이핑(static typing)을 지원하며, 변수의 타입을 명시적으로 지정할 수 있습니다. 타입이 지정된 변수에는 해당 타입의 값만 할당할 수 있습니다.

let message: string = "Hello, world!";
message = 42;  // 오류: number 타입을 string 타입 변수에 할당할 수 없음

2. 인터페이스와 타입

JavaScript: 자바스크립트는 인터페이스나 타입을 정의하는 기능이 없습니다. 객체의 구조를 지정할 수 있는 방법은 없습니다.

TypeScript: 타입스크립트는 interface와 type 키워드를 통해 객체의 구조를 정의하고, 그 구조에 맞는 객체만 사용하도록 강제할 수 있습니다.

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

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

3. 명시적 타입 선언

JavaScript: 변수 선언 시 타입을 명시하지 않으며, 할당되는 값에 따라 타입이 동적으로 결정됩니다.

let count = 10; // count는 number로 추론됨

TypeScript: 변수 선언 시 타입을 명시적으로 선언할 수 있으며, 타입스크립트는 타입 일관성을 유지하도록 강제합니다.

let count: number = 10;

4. 함수 매개변수 및 반환 타입

JavaScript: 함수의 매개변수와 반환 타입을 지정하지 않으며, 함수 호출 시 전달되는 인자의 타입도 제한이 없습니다.

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

TypeScript: 함수의 매개변수와 반환 타입을 명시적으로 지정할 수 있습니다. 이로 인해 함수 사용 시 타입 안전성을 확보할 수 있습니다.

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

5. 제네릭(Generics)

JavaScript: 자바스크립트는 제네릭을 지원하지 않으며, 모든 함수와 클래스는 특정 타입에 대해 작동하도록 고정됩니다.

TypeScript: 타입스크립트는 제네릭을 통해 함수나 클래스가 다양한 타입에서 동작할 수 있도록 합니다.

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("Hello");  // 타입이 string으로 지정된 제네릭 함수

6. 접근 제어자(Access Modifiers)

JavaScript: 자바스크립트에는 public, private, protected와 같은 접근 제어자가 없습니다. 모든 프로퍼티와 메서드는 기본적으로 public입니다.

TypeScript: 타입스크립트는 클래스의 멤버에 대해 접근 제어자를 지원합니다. public, private, protected를 사용하여 클래스 멤버의 접근 범위를 제어할 수 있습니다.

class Person {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public getName(): string {
    return this.name;
  }
}

7. 타입 추론

JavaScript: 자바스크립트에서는 타입 추론이 발생하지 않으며, 모든 변수의 타입은 동적으로 결정됩니다.

TypeScript: 타입스크립트는 타입 추론을 통해 변수, 함수 반환값 등의 타입을 자동으로 추론합니다. 따라서 모든 타입을 명시적으로 선언하지 않아도 됩니다.

let message = "Hello, TypeScript!";  // 타입스크립트가 자동으로 string 타입으로 추론

Leave a Comment