TypeScript 환경 설정 및 설치

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

TypeScript는 자바스크립트의 상위 집합으로, 정적 타입 시스템을 제공하여 코드의 안정성과 가독성을 높여줍니다. 실무에서 TypeScript를 사용하면 코드 작성 시 발생할 수 있는 많은 오류를 사전에 방지할 수 있습니다. 예를 들어, 변수의 타입을 명시적으로 정의할 수 있기 때문에 잘못된 타입의 데이터가 사용될 가능성을 줄일 수 있습니다.

반대로, TypeScript 환경을 제대로 설정하지 않으면 코드 작성 시 오류가 발생하거나, 빌드 과정에서 문제가 생길 수 있습니다. 이는 개발 효율성을 떨어뜨리고, 팀원 간의 협업에도 방해가 될 수 있습니다. 따라서 TypeScript의 환경 설정과 설치 방법을 이해하는 것은 필수적입니다.

2. 핵심 개념 설명

• TypeScript: 자바스크립트를 기반으로 한 프로그래밍 언어로, 정적 타입을 지원합니다. 이는 컴파일 타임에 타입 오류를 잡을 수 있게 해줍니다.
• Node.js: 자바스크립트를 서버 측에서 실행할 수 있게 해주는 런타임입니다. TypeScript를 사용하기 위해 Node.js가 필요합니다.
• NPM (Node Package Manager): Node.js와 함께 설치되는 패키지 관리자입니다. TypeScript와 같은 라이브러리를 설치하는 데 사용됩니다.

용어	설명
TypeScript	자바스크립트의 정적 타입 언어
Node.js	자바스크립트를 서버 측에서 실행하는 런타임
NPM	Node.js 패키지를 관리하는 도구

3. 기본 코드 예제

TypeScript를 설치하고, 간단한 TypeScript 코드를 작성해보겠습니다.

1단계: TypeScript 설치

터미널을 열고 다음 명령어를 입력합니다.

npm install -g typescript

• npm: Node Package Manager의 약어로, 패키지를 설치하는 명령어입니다.
• install: 패키지를 설치하라는 명령어입니다.
• -g: 전역(global)으로 설치하라는 옵션입니다.
• typescript: 설치할 패키지의 이름입니다.

2단계: TypeScript 파일 작성

hello.ts라는 파일을 생성하고 다음 코드를 입력합니다.

let greeting: string = "안녕하세요, TypeScript!";
console.log(greeting);

• let : 변수를 선언하는 키워드입니다.
• greeting: string : greeting 변수의 타입을 string으로 명시합니다.
• console.log(greeting); : greeting 변수를 출력합니다.

실행 결과

안녕하세요, TypeScript!

• let greeting: string = "안녕하세요, TypeScript!"; : "안녕하세요, TypeScript!"라는 문자열을 greeting 변수에 할당합니다.
• console.log(greeting); : greeting 변수의 값을 콘솔에 출력합니다.

4. 실전 활용 예제

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

쇼핑몰에서 장바구니에 상품을 추가하는 기능을 구현할 때 TypeScript를 사용하면 각 상품의 타입을 명확히 할 수 있습니다.

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

let cart: Product[] = [];

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

addToCart({ id: 1, name: "신발", price: 50000 });
console.log(cart);

• 설명: Product 인터페이스를 정의하여 상품의 구조를 명확히 하고, addToCart 함수를 통해 상품을 장바구니에 추가합니다.

예제 2: 사용자 정보 관리

사용자의 정보를 관리하는 시스템을 구현할 때도 유용합니다.

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

let users: User[] = [];

function addUser(user: User) {
    users.push(user);
}

addUser({ id: 1, username: "홍길동" });
console.log(users);

• 설명: User 인터페이스를 사용하여 사용자 정보를 명확히 정의하고, addUser 함수를 통해 사용자를 추가합니다.

5. 흔한 실수와 주의사항

실수 1: 타입 미지정

let greeting; // 타입이 미지정
greeting = "안녕하세요"; // 나중에 값을 할당하면 에러가 발생하지 않음

• 올바른 코드:

let greeting: string; // 타입을 명시
greeting = "안녕하세요";

실수 2: 변수명 오타

let userName: string = "이순신";
console.log(userNmae); // 변수명 오타

• 올바른 코드:

let userName: string = "이순신";
console.log(userName); // 변수명 수정

6. 정리

• TypeScript는 정적 타입을 제공하여 코드의 안정성을 높여줍니다.
• Node.js와 NPM을 통해 TypeScript 환경을 설정할 수 있습니다.
• 인터페이스를 사용하여 데이터 구조를 명확히 정의할 수 있습니다.
• 타이핑을 통해 코드에서 발생할 수 있는 오류를 사전에 방지할 수 있습니다.

다음에 학습하면 좋은 주제: TypeScript의 고급 타입, 인터페이스 활용법, TypeScript와 React 연동하기.