TypeScript 중급 문법

TypeScript 타입스크립트와 JavaScript의 차이

TypeScript 타입스크립트와 JavaScript의 차이 — 중급

타입스크립트와 JavaScript의 차이

1. 도입 (왜 배워야 하는가)

타입스크립트(TypeScript)는 자바스크립트(JavaScript)의 슈퍼셋으로, 정적 타입 시스템을 도입하여 코드의 가독성, 유지보수성 및 오류 예방을 강화합니다. 실무에서는 팀원 간의 협업이 필수적이며, 타입스크립트를 사용하면 코드의 의도를 명확히 전달할 수 있습니다.

타입이 없거나 느슨한 언어에서는 런타임 오류가 발생할 수 있어, 배포 후에 이를 수정해야 하는 불상사가 생길 수 있습니다. 예를 들어, 변수의 타입을 잘못 사용하여 발생하는 오류는 디버깅을 어렵게 하고, 생산성을 저하시킬 수 있습니다. 타입스크립트를 통해 이러한 문제를 사전에 방지할 수 있습니다.

2. 핵심 개념 설명

2.1. 정적 타입 vs 동적 타입

정적 타입: 코드 작성 시 변수의 타입이 결정되며, 컴파일 시 타입 검사가 이루어집니다. (예: 타입스크립트)
동적 타입: 변수의 타입이 런타임 시 결정되며, 개발자가 의도한 대로 실행되지 않을 수 있습니다. (예: 자바스크립트)

비유: 정적 타입은 정해진 규칙에 따라 사전 준비를 철저히 하는 것(예: 음식 재료를 미리 계량해놓기)과 같고, 동적 타입은 요리 중에 재료를 추가하거나 변경하는 것(예: 요리 중간에 맛을 보고 소금을 추가하는)과 비슷합니다.

2.2. 인터페이스 (Interface)

인터페이스는 객체의 구조를 정의하며, 객체가 어떤 속성 및 메서드를 가져야 하는지를 명세합니다.

용어 정리:

용어	정의
타입	변수나 함수의 데이터 유형
인터페이스	객체의 구조를 정의하는 계약
제네릭	다양한 타입을 받을 수 있는 함수나 클래스

3. 기본 코드 예제

타입스크립트를 사용한 간단한 변수 선언 예제입니다.

let message: string = "안녕하세요, 타입스크립트!";
console.log(message);

실행 결과:

안녕하세요, 타입스크립트!

코드 한 줄씩 동작 설명:

let message: string = "안녕하세요, 타입스크립트!";: message라는 변수를 선언하고, 그 타입을 string으로 지정합니다. "안녕하세요, 타입스크립트!"라는 값을 할당합니다.
console.log(message);: message 변수를 콘솔에 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 구현

장바구니에 담을 상품의 타입을 정의하고, 장바구니에 상품을 추가하는 함수를 구현합니다.

interface Product {
    id: number;
    name: string;
    price: number;
}

const cart: Product[] = [];

function addToCart(product: Product) {
    cart.push(product);
}

addToCart({ id: 1, name: "사과", price: 1000 });
console.log(cart);

상황 설명: 쇼핑몰에서 사용자가 상품을 장바구니에 추가할 때, 상품의 타입을 명확히 정의하여 코드의 가독성을 높입니다.

예제 2: 사용자 정보 처리

사용자 정보를 저장하는 타입을 정의하고, 사용자 정보를 출력하는 함수를 작성합니다.

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

function printUserInfo(user: User) {
    console.log(사용자 이름: ${user.username}, 나이: ${user.age});
}

printUserInfo({ username: "홍길동", age: 30 });

상황 설명: 사용자 정보를 관리하는 시스템에서, 타입스크립트를 통해 사용자 정보가 올바르게 전달되는지 확인할 수 있습니다.

5. 흔한 실수와 주의사항

실수 1: 타입 미지정

잘못된 코드:

let num; // 타입이 지정되지 않음
num = "문자열"; // 런타임 오류 발생 가능

올바른 코드:

let num: number; // 타입을 명시
num = 5; // 올바른 값 할당

실수 2: 인터페이스 사용 오류