타입스크립트(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 타입으로 추론
