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

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

타입스크립트 파일 만들기

먼저, 여러분이 환경 설정을 위해 만들었던 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.

첫 번째 타입스크립트 프로그램에서 작성, 타입 검사, 자바스크립트 변환, 실행 결과 확인 흐름을 점검했습니다.

위 2025는 원문 예제의 고정 입력값입니다. 현재 연도를 자동으로 읽는 프로그램이 아니므로 실행 날짜에 따라 출력이 바뀌지 않습니다.

이후 장에서는 이 기본 흐름을 바탕으로 타입스크립트의 주요 기능과 적용 기준을 더 자세히 다룹니다.

다음 장에서는 타입스크립트의 핵심 개념인 타입 시스템에 대해 더 자세히 알아보겠습니다.

기본 타입부터 복잡한 타입까지, 타입을 정의하고 활용하는 방법을 살펴봅니다.

프로젝트 경로를 선택했다면 앞 절의 별도 ts-first-isolated 설정을 사용했다면 include를 ["first-program.ts"]로 바꾸고, 현재 원문 코드를 그 파일에 저장합니다. 이 파일을 검사·출력할 때는 파일명을 CLI에 덧붙이지 않습니다.

tsc -p . --noEmit
tsc -p .
node dist/first-program.js

tsc first-program.ts는 앞의 파일 지정 예제입니다. TypeScript 6.0 이상은 설정 파일이 있는 폴더에서 이를 TS5112로 중단합니다. 설정을 무시하는 별도 실험이 목적일 때만 6.0 이상의 tsc --ignoreConfig first-program.ts를 사용하며, 이 명령에는 프로젝트의 검사·출력 옵션이 적용되지 않습니다. tsc -p . first-program.ts처럼 두 선택을 한 명령에 섞지도 않습니다. 어느 경로를 사용했는지와 새 출력 파일의 위치를 함께 확인하세요.

스스로 확인하기 검사가 성공한 상태에서 currentYear를 2026으로, isActive를 false로 바꾸세요. greeting의 추론 타입은 바뀌나요? 다시 검사·출력한 프로그램이 몇 줄을 출력하고 어떤 문장을 만드는지 예상해 보세요.

마지막으로 invalidYear의 오류 주석을 해제하고 프로젝트 검사 결과를 확인하세요. noEmitOnError가 새 출력을 막아도 이전 JavaScript는 남을 수 있습니다. 오류 진단을 무시하고 남아 있는 파일의 출력만 확인하지 않습니다.

이 버전별 변경은 공식 TypeScript 6.0 릴리스 노트에 명시되어 있습니다.