JavaScript 중급 문법

JavaScript 타입스크립트 기초

JavaScript 타입스크립트 기초 — 중급

타입스크립트 기초

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

타입스크립트(TypeScript)는 자바스크립트의 상위 집합(Superset)으로, 정적 타입을 지원하여 코드의 안정성과 가독성을 높여줍니다. 실무에서 대규모 애플리케이션을 개발할 때, 여러 개발자가 협업하는 경우가 많습니다. 이때 타입스크립트를 사용하면 코드의 오류를 사전에 잡고, IDE의 자동 완성 기능을 통해 생산성을 높일 수 있습니다.

타입스크립트를 배우지 않으면, 다음과 같은 문제가 발생할 수 있습니다:

코드의 예기치 않은 오류 발생 빈도가 높아짐
유지보수 및 리팩토링 시 어려움
팀원 간의 코드 이해도 차이로 인한 협업 비효율

2. 핵심 개념 설명

타입스크립트의 주요 개념은 다음과 같습니다:

타입(Type): 변수나 함수의 매개변수가 가질 수 있는 값의 종류를 정의합니다.

- 비유: 음식점의 메뉴판. 메뉴판에 어떤 음식이 있는지 명시되어 있어야 손님이 원하는 음식을 쉽게 주문할 수 있습니다.

인터페이스(Interface): 객체의 구조를 정의하는데 사용됩니다.

- 비유: 건축 도면. 건축 도면이 없다면 건물이 어떤 모습일지 알 수 없듯이, 인터페이스는 객체의 형태를 명확하게 정의합니다.

제네릭(Generics): 다양한 타입에 대해 재사용 가능한 컴포넌트를 작성할 수 있게 해줍니다.

- 비유: 만능 도구. 다양한 상황에서 사용할 수 있도록 설계된 도구처럼, 제네릭은 여러 타입에서 동작할 수 있도록 해줍니다.

용어	설명
타입	변수나 함수의 값의 종류
인터페이스	객체의 구조를 정의하는 계약
제네릭	다양한 타입에 대해 재사용 가능

3. 기본 코드 예제

타입스크립트의 기본 사용법을 보여주는 예제입니다.

// 타입 정의
let name: string = "홍길동"; // 문자열 타입
let age: number = 30; // 숫자 타입
let isStudent: boolean = true; // 불리언 타입

// 함수 정의
function greet(person: string): string {
    return 안녕하세요, ${person}님!;
}

// 함수 호출
console.log(greet(name)); // 안녕하세요, 홍길동님!

실행 결과:

안녕하세요, 홍길동님!

let name: string = "홍길동"; : name이라는 변수를 문자열 타입으로 선언하고 "홍길동"으로 초기화.
let age: number = 30; : age라는 변수를 숫자 타입으로 선언하고 30으로 초기화.
let isStudent: boolean = true; : isStudent라는 변수를 불리언 타입으로 선언하고 true로 초기화.
function greet(person: string): string { ... } : person 매개변수를 문자열 타입으로 받는 greet 함수 정의.
console.log(greet(name)); : greet 함수를 호출하고 결과를 콘솔에 출력.

4. 실전 활용 예제

쇼핑몰에서 장바구니를 구현할 때

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

   let cart: Product[] = [];

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

   addToCart({ id: 1, name: "노트북", price: 1000 });
   console.log(cart); // [{ id: 1, name: "노트북", price: 1000 }]

사용자 정보를 관리하는 경우

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

   function createUser(user: User): string {
       return ${user.username} (${user.email}), 나이: ${user.age};
   }

   const newUser = createUser({ username: "김철수", email: "[email protected]", age: 25 });
   console.log(newUser); // 김철수 ([email protected]), 나이: 25

5. 흔한 실수와 주의사항

타입을 잘못 지정하는 경우

- 잘못된 코드:

     let age: number = "30"; // 오류 발생

- 올바른 코드:

     let age: number = 30; // 숫자 타입으로 올바르게 지정

인터페이스의 필드를 누락하는 경우

- 잘못된 코드:

     addToCart({ id: 1, name: "모니터" }); // price 필드가 누락됨

- 올바른 코드:

     addToCart({ id: 1, name: "모니터", price: 200 }); // 모든 필드를 포함

6. 정리

타입스크립트를 사용하면 코드의 안정성과 가독성을 높일 수 있다.
타입, 인터페이스, 제네릭은 타입스크립트의 핵심 개념이다.
실무에서 자주 사용하는 패턴으로는 객체 타입 정의와 함수의 타입 지정이 있다.

다음에 학습하면 좋은 주제는 "타입스크립트 고급 개념"으로, 제네릭, 유니온 타입, 고급 타입 조작 등을 다루는 것이 좋습니다.