첫 번째 타입스크립트 프로그램 작성

이 절에서는 첫 번째 타입스크립트 프로그램을 작성하면서 타입 검사, 컴파일, 자바스크립트 실행 흐름을 확인합니다.

타입스크립트 파일 만들기

먼저, 여러분이 환경 설정을 위해 만들었던 my-ts-project 폴더를 VS Code로 열어주세요. 만약 새로운 프로젝트를 시작하고 싶다면, 이전 절의 지침에 따라 새 폴더를 만들고 tsc --init 명령어로 tsconfig.json 파일을 생성한 후 진행하셔도 좋습니다.

이제 이 폴더 안에 first-program.ts라는 새 파일을 생성해봅시다. 파일명은 자유롭게 정해도 되지만, 일반적으로 타입스크립트 파일은 .ts 확장자를 사용합니다.

간단한 함수와 변수에 타입 적용하기

first-program.ts 파일에 다음 코드를 작성해보세요. 한 줄씩 살펴보면서 타입스크립트가 어떻게 동작하는지 이해하는 것이 중요합니다.

// 1. 변수에 타입 명시하기
let appName: string = "TypeScript Journey";
let currentYear: number = 2025;
let isActive: boolean = true;

// 2. 함수에 타입 명시하기 (매개변수와 반환 값)
function createWelcomeMessage(name: string, year: number): string {
  return `Hello, ${name}! We are embarking on the ${year} ${appName}.`;
}

// 3. 타입 추론 (Type Inference) 살펴보기
let greeting = createWelcomeMessage("Explorer", currentYear);
// VS Code에서 'greeting' 변수에 마우스를 올려보세요.
// string 타입으로 자동으로 추론되었음을 확인할 수 있습니다.

// 4. 의도적인 오류 발생시켜보기
// 아래 줄의 주석을 해제하고 어떤 오류 메시지가 뜨는지 확인해보세요.
// let invalidYear: number = "Two Thousand Twenty-Five";
// Type 'string' is not assignable to type 'number'. (string 형식을 number 형식에 할당할 수 없습니다.)

// 5. 타입스크립트 코드 실행 결과 확인
console.log(greeting);

if (isActive) {
  console.log(`Current application status: Active for ${currentYear} year.`);
}

코드를 작성하셨다면, 몇 가지 중요한 포인트를 짚어보겠습니다.

• 변수 타입 명시 (: 연산자): let appName: string = "TypeScript Journey";처럼 변수 이름 뒤에 콜론(:)으로 타입을 명시했습니다. 이는 appName 변수가 문자열(string) 값만 가질 수 있음을 의미합니다. 숫자나 불리언 값을 할당하려 하면 VS Code가 즉시 오류를 표시해 줍니다. number, boolean 타입도 같은 방식으로 동작합니다.

• 함수 매개변수 및 반환 값 타입 명시: function createWelcomeMessage(name: string, year: number): string { ... }에서 name: string과 year: number는 함수 매개변수의 타입을 명시합니다. 함수 괄호 뒤의 : string은 이 함수가 문자열(string)을 반환해야 함을 나타냅니다.

• 타입 추론 (Type Inference): let greeting = createWelcomeMessage("Explorer", currentYear); 줄을 보면 greeting 변수에 타입을 직접 쓰지 않았습니다. 하지만 VS Code에서 greeting 위에 마우스를 올리면, 이 변수가 string 타입으로 추론되었음을 확인할 수 있습니다. 타입스크립트는 모든 타입을 수동으로 쓰지 않아도, 할당값과 반환값을 보고 타입을 추론합니다. 덕분에 코드가 간결해지면서도 타입 안정성을 유지할 수 있습니다.

• 컴파일 시점의 오류 검출: 주석 처리된 let invalidYear: number = "Two Thousand Twenty-Five"; 줄의 주석을 해제하면 VS Code가 즉시 빨간 줄과 오류 메시지를 보여줍니다. Type 'string' is not assignable to type 'number'. 즉, 문자열은 숫자에 할당될 수 없다는 의미입니다. 이처럼 타입스크립트는 실행 전에 잠재적 오류를 알려 런타임 문제를 미리 방지합니다.

아래 다이어그램은 첫 프로그램에서 확인해야 할 타입 명시, 타입 추론, 오류 피드백의 역할을 한 화면에 정리합니다.

컴파일하고 실행하기

이제 작성한 first-program.ts 파일을 자바스크립트로 변환(컴파일)하고 실행해봅시다.

tsc first-program.ts

node first-program.js

Hello, Explorer! We are embarking on the 2025 TypeScript Journey.
Current application status: Active for 2025 year.

첫 번째 타입스크립트 프로그램에서 작성, 타입 검사, 자바스크립트 변환, 실행 결과 확인 흐름을 점검했습니다. 이후 장에서는 이 기본 흐름을 바탕으로 타입스크립트의 주요 기능과 적용 기준을 더 자세히 다룹니다.

다음 장에서는 타입스크립트의 핵심 개념인 타입 시스템에 대해 더 자세히 알아보겠습니다. 기본 타입부터 복잡한 타입까지, 타입을 정의하고 활용하는 방법을 살펴봅니다.

아래 다이어그램은 첫 .ts 파일이 타입 검사, 자바스크립트 변환, 실행으로 이어지는 흐름을 한 번 더 정리합니다.

첫 번째 타입스크립트 프로그램 작성를 코드에 적용하기 전, 컴파일 오류가 막아 줄 지점과 사람이 약속해야 할 지점을 나눕니다.

아래 다이어그램은 첫 TypeScript 프로그램에서 파일 작성, 타입 표기, 컴파일 실행이 어떻게 이어지는지 보여줍니다.

아래 다이어그램은 첫 TypeScript 프로그램을 작성할 때 파일 생성, 타입 주석, 컴파일, 실행 확인 순서로 점검합니다.