프로젝트 폴더 만들기

먼저 학습용 프로젝트 폴더를 만들고 초기화합니다.

mkdir typescript-studycd typescript-studynpm init -y

npm init -y는 package.json 파일을 자동으로 생성합니다. 이 파일은 프로젝트의 설정 정보를 담고 있습니다.

TypeScript 설정 파일 만들기

TypeScript 프로젝트에는 tsconfig.json 파일이 필요합니다. 다음 명령어로 생성합니다.

tsc --init

터미널에 Successfully created a tsconfig.json file.이라는 메시지가 표시됩니다. tsconfig.json에는 TypeScript 컴파일러의 동작 방식을 설정하는 다양한 옵션이 들어있습니다. 지금은 기본 설정 그대로 사용합니다. 이 파일의 자세한 내용은 PART 07에서 다룹니다.

첫 번째 TypeScript 파일

VS Code에서 typescript-study 폴더를 열고, hello.ts 파일을 생성합니다.

// 새 파일: hello.tsconst message: string = "Hello, TypeScript!";console.log(message);

JavaScript와 거의 같지만, 한 가지 다른 점이 있습니다. message 변수 뒤에 : string이 붙었습니다. 이것이 타입 표기(type annotation)입니다. "이 변수는 문자열이다"라고 TypeScript에게 알려주는 것입니다.

tsc로 컴파일하기

터미널에서 다음 명령어를 실행합니다.

tsc hello.ts

파일을 직접 지정하면 tsconfig.json 설정이 적용되지 않습니다. 프로젝트 전체를 컴파일하려면 tsc만 실행하면 됩니다.

같은 폴더에 hello.js 파일이 생성됩니다. 내용을 열어보면 다음과 같습니다.

// 생성된 파일: hello.jsvar message = "Hello, TypeScript!";console.log(message);

: string 타입 표기가 사라졌습니다. TypeScript의 타입 정보는 컴파일 시점에만 사용되고, 생성된 JavaScript에는 포함되지 않습니다.

이제 생성된 JavaScript 파일을 실행합니다.

node hello.js

Hello, TypeScript!

tsx로 바로 실행하기

매번 tsc로 컴파일한 후 node로 실행하는 것은 번거롭습니다. tsx를 사용하면 한 번에 실행할 수 있습니다.

tsx hello.ts

Hello, TypeScript!

컴파일과 실행이 한 번에 처리됩니다. 이 책에서는 주로 tsx를 사용하여 예제를 실행합니다.

타입 에러 경험해보기

TypeScript가 에러를 잡아주는 것을 직접 경험해보겠습니다. hello.ts 파일을 다음과 같이 수정합니다.

// 수정: hello.tsconst message: string = "Hello, TypeScript!";console.log(message);const count: number = "이것은 숫자가 아닙니다";

VS Code에서 "이것은 숫자가 아닙니다" 부분에 빨간 밑줄이 표시됩니다. 마우스를 올려보면 다음과 같은 에러 메시지가 나타납니다.

Type 'string' is not assignable to type 'number'.

"string 타입은 number 타입에 할당할 수 없습니다"라는 뜻입니다. count는 숫자(number)라고 선언했는데, 문자열(string)을 넣으려고 했으니 TypeScript가 잘못을 지적하는 것입니다.

이것이 TypeScript의 핵심입니다. 코드를 실행하기 전에 에러를 찾아줍니다.

잘못된 줄을 삭제하고 원래대로 돌려놓겠습니다.

// 수정: hello.tsconst message: string = "Hello, TypeScript!";console.log(message);

정리

이번 챕터에서 배운 것을 정리합니다.

다음 챕터에서는 설치 없이 바로 TypeScript를 실험해볼 수 있는 TypeScript Playground를 소개합니다.