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

이제는 직접 여러분의 첫 번째 타입스크립트 프로그램을 작성하면서, 타입스크립트의 핵심적인 특성들을 더욱 깊이 이해하는 시간을 가져보겠습니다. 복잡한 이론보다는 실제 코드를 통해 배우는 것이 훨씬 효과적일 때가 많습니다.

타입스크립트 파일 만들기

먼저, 여러분이 환경 설정을 위해 만들었던 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는 각각 함수의 매개변수 name과 year가 어떤 타입의 값을 받아야 하는지를 명시합니다. 함수 괄호 뒤의 : 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.

성공적으로 첫 번째 타입스크립트 프로그램을 작성하고 실행해보셨습니다. 이 과정을 통해 여러분은 타입스크립트가 어떻게 타입 검사를 수행하고, 최종적으로 자바스크립트로 변환되어 실행되는지 직접 경험하셨습니다. 앞으로 남은 장들에서는 이러한 기본 원리를 바탕으로 타입스크립트의 더욱 다양한 기능과 강력한 활용법들을 심도 있게 다루게 될 것입니다.

다음 장에서는 타입스크립트의 핵심 개념인 타입 시스템에 대해 더 자세히 알아보겠습니다. 기본 타입부터 복잡한 타입까지, 타입을 어떻게 정의하고 활용하는지 배우는 것은 타입스크립트 마스터의 첫걸음이 될 것입니다.