IT 개발자 블로그 - Java, Spring Boot, React 등

안녕하세요! 오늘부터 타입스크립트(TypeScript)에 대한 연재를 시작합니다. 이 시리즈는 자바스크립트에 익숙한 개발자들이 타입스크립트를 쉽게 배울 수 있도록 기초부터 차근차근 설명할 예정입니다.

타입스크립트란 무엇인가?

타입스크립트는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합(Superset)입니다. 간단히 말해, 모든 자바스크립트 코드는 타입스크립트 코드이기도 하지만, 타입스크립트는 자바스크립트에 정적 타입 시스템을 추가한 언어입니다.

// 자바스크립트 코드
function add(a, b) {
  return a + b;
}

// 타입스크립트 코드
function add(a: number, b: number): number {
  return a + b;
}

위 예제에서 볼 수 있듯이, 타입스크립트는 함수의 매개변수와 반환값에 타입을 명시할 수 있습니다. 이는 코드의 안정성을 크게 향상시킵니다.

왜 타입스크립트를 배워야 할까?

1. 버그 감소: 타입 체크를 통해 많은 버그를 컴파일 시점에서 발견할 수 있습니다.
2. 더 나은 개발 경험: 코드 자동 완성, 인터페이스 검사 등 IDE 지원이 훨씬 강력합니다.
3. 코드 가독성 증가: 타입 정보는 일종의 문서 역할을 하여 코드를 더 쉽게 이해할 수 있게 합니다.
4. 대규모 프로젝트에 적합: 팀 단위 개발과 대규모 애플리케이션 개발에 있어 안정성을 제공합니다.
5. 인기 상승 중: Angular, React, Vue 등 주요 프레임워크들이 타입스크립트를 공식 지원하거나 권장하고 있습니다.

타입스크립트 설치하기

타입스크립트를 시작하려면 Node.js와 npm이 필요합니다. 다음 명령어를 통해 전역으로 타입스크립트를 설치할 수 있습니다:

npm install -g typescript

설치가 완료되면 tsc 명령어를 사용할 수 있습니다. 다음과 같이 버전을 확인해 보세요:

tsc --version

첫 번째 타입스크립트 파일 만들기

이제 간단한 타입스크립트 파일을 만들어 보겠습니다. hello.ts라는 파일을 생성하고 다음 코드를 입력하세요:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const username: string = "TypeScript";
console.log(greet(username));

이 파일을 컴파일하려면 다음 명령어를 사용합니다:

tsc hello.ts

명령어를 실행하면 hello.js 파일이 생성됩니다. 이 파일은 순수 자바스크립트 코드로 변환된 결과물입니다. 다음 명령어로 실행해 보세요:

node hello.js

"Hello, TypeScript!"가 출력되는 것을 확인할 수 있습니다.

기본 타입스크립트 설정 파일 만들기

실제 프로젝트에서는 tsconfig.json 파일을 사용하여 타입스크립트 컴파일러 옵션을 설정합니다. 다음 명령어로 기본 설정 파일을 생성할 수 있습니다:

tsc --init

이 명령을 실행하면 다양한 옵션이 포함된 tsconfig.json 파일이 생성됩니다. 필요에 따라 이 파일을 수정하여 프로젝트에 맞는 설정을 할 수 있습니다.

다음 시간에는...

이번 포스팅에서는 타입스크립트의 기본 개념과 설치 방법에 대해 알아보았습니다. 다음 포스팅에서는 타입스크립트의 기본 타입들과 타입 주석(Type Annotation)에 대해 더 자세히 살펴보겠습니다.