[Typescript] 타입스크립트 기초 입문 : 타입스크립트를 시작하기 위한 첫걸음

들어가며

타입스크립트(TypeScript)는 자바스크립트에 정적 타입을 추가한 언어로, 대규모 애플리케이션 개발에서 안전성과 유지보수성을 크게 향상시켜줍니다. 자바스크립트를 기반으로 하고 있기 때문에 기존의 자바스크립트 코드를 그대로 사용할 수 있으면서도, 타입 검사를 통해 런타임 오류를 줄이고 IDE 지원을 강화합니다.

이 글에서는 타입스크립트를 처음 접하는 분들을 위해 다음을 다룹니다:

• 타입스크립트란 무엇이며, 왜 사용하는가?
• 개발 환경 설정 및 기본 컴파일 과정 이해
• 기본 타입(문자열, 숫자, 불리언 등)과 간단한 예제

이 과정을 통해 타입스크립트를 설치하고, 간단한 코드를 작성하며, 타입스크립트 개발 환경에서의 워크플로를 익혀봅니다.

---

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

타입스크립트는 자바스크립트의 상위 집합(Superset)으로, 자바스크립트가 가진 유연함과 함께 정적 타입 검사 기능을 제공합니다.

1-1. 주요 특징

• 정적 타입 검사 : 변수와 함수의 데이터 타입을 컴파일 타임에 검사하여 오류를 사전에 발견
• 더 나은 IDE 지원 : 자동 완성, 코드 네비게이션, 리팩토링 등의 기능을 강화
• ESNext 기능 지원 : 최신 ECMAScript 표준을 지원하며, 이전 버전과 호환 가능하도록 컴파일
• 타입 시스템 확장 : 인터페이스, 제네릭, 고급 타입 등 자바스크립트에 없는 기능 제공

1-2. 타입스크립트를 사용하는 이유

• 안정성 : 런타임 오류를 줄이고, 코드 품질을 향상시킵니다.
• 유지보수성 : 대규모 프로젝트에서 협업 시 명확한 타입 정의로 코드 이해도를 높입니다.
• 생산성 : IDE와의 통합으로 개발 속도를 높이고 오류를 빠르게 파악할 수 있습니다.

---

2. 개발 환경 설정

타입스크립트를 사용하기 위해 다음 환경을 준비합니다.

2-1. Node.js와 npm 설치

타입스크립트는 Node.js와 npm(Node Package Manager)을 통해 설치합니다. Node.js 공식 웹사이트에서 최신 LTS(Long-Term Support) 버전을 설치하세요. 설치 후 다음 명령어로 제대로 설치되었는지 확인합니다.

 

[bash]

node -v
npm -v

 

2-2. 타입스크립트 설치

전역으로 타입스크립트를 설치합니다.

 

[bash]

npm install -g typescript

 

설치 후 tsc 명령어를 사용하여 버전을 확인합니다.

 

[bash]

tsc -v

 

2-3. VS Code 설치 및 확장

Visual Studio Code를 설치하고, "TypeScript"와 "ESLint" 같은 확장을 추가하여 개발 환경을 최적화합니다.

 

2-4. 프로젝트 초기화 및 tsconfig 설정

타입스크립트 프로젝트를 설정하려면 다음 명령어를 사용하여 초기화합니다.

 

[bash]

mkdir my-typescript-app
cd my-typescript-app
npm init -y
tsc --init

 

위 명령은 tsconfig.json 파일을 생성합니다. 이 파일은 타입스크립트 컴파일러 설정을 관리합니다. 주요 설정은 다음과 같습니다.

• "target": "ES6" : 컴파일된 자바스크립트 버전 설정
• "strict": true : 엄격한 타입 검사 모드 활성화
• "outDir": "./dist" : 컴파일된 파일의 출력 디렉토리 지정
• "rootDir": "./src" : 소스 파일의 디렉토리 지정

---

 

3. tsc 사용법 및 기본 컴파일 과정

타입스크립트 파일(.ts)은 컴파일러(tsc)를 통해 자바스크립트 파일(.js)로 변환됩니다.

3-1. 간단한 컴파일 예제

다음과 같은 index.ts 파일을 작성합니다.

 

[typescript]

const message: string = 'Hello, TypeScript!';
console.log(message);

 

이 파일을 컴파일하려면 다음 명령어를 실행합니다.

 

[bash]

tsc index.ts

 

컴파일 후 index.js 파일이 생성되며, 이 파일은 자바스크립트 환경에서 실행할 수 있습니다.

 

[bash]

node index.js

 

3-2. 자동 컴파일 설정

개발 중 매번 tsc 명령어를 실행하는 대신, tsc --watch 명령어를 사용하면 파일 변경 시 자동으로 컴파일됩니다.

 

[bash]

tsc --watch

 

4. 기본 타입 소개

타입스크립트는 다양한 기본 타입을 제공합니다. 변수 선언 시 명시적으로 타입을 지정하거나, 타입 추론을 통해 자동으로 결정됩니다.

4-1. 기본 타입

1. 문자열(String)

[typescript]

let name: string = 'Alice';

 

2. 숫자(Number)

[typescript]

let age: number = 30;

3. 불리언(Boolean)

[typescript]

let isDeveloper: boolean = true;

4. 배열(Array)

[typescript]

let scores: number[] = [85, 90, 78];

5. 튜플(Tuple)

[typescript]

let user: [string, number] = ['Alice', 30];

6. 열거형(Enum)

[typescript]

enum Direction {
  Up,
  Down,
  Left,
  Right
}
let move: Direction = Direction.Up;

7. any와 unknown

• any : 모든 타입 허용(최대한 사용 지양).
• unknown : 타입을 알 수 없는 값에 사용, 안전성 강화.

[typescript]

let value: any = 'Hello'; // 타입 검사 없음
let something: unknown = 42; // 안전한 처리 필요

 

5. 간단한 예제 : “Hello, TypeScript!”

다음 코드를 작성하여 타입스크립트를 체험해봅시다.

 

[typescript]

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

const user: string = 'Alice';
console.log(greet(user));

 

이 코드를 index.ts로 저장하고, 다음 명령으로 컴파일 및 실행합니다.

 

[bash]

tsc index.ts
node index.js

 

출력 결과

Hello, Alice!

 

 

마무리

이 글을 통해 타입스크립트를 시작하기 위한 기초 과정을 살펴보았습니다. 이제 타입스크립트 개발 환경을 구축하고 간단한 코드를 작성할 수 있게 되었습니다. 다음 단계에서는 타입 시스템을 이해하고 정적 타입을 활용해 안전한 코드를 작성하는 방법을 알아보겠습니다.