첫 번째 타입스크립트 프로그램 작성
변수와 함수에 타입을 붙인 첫 TypeScript 파일을 검사·컴파일하고 생성된 JavaScript를 실행하는 흐름을 확인합니다.
이 절에서는 첫 번째 타입스크립트 프로그램을 작성하면서 타입 검사, 컴파일, 자바스크립트 실행 흐름을 확인합니다.
WRITE · CHECK · EMIT · RUN
첫 프로그램은 네 경계를 따로 확인한다
프로젝트 모드 검사와 noEmitOnError를 권위로 두고 생성된 JavaScript를 같은 모듈 규칙으로 실행한다.
- 공개 경계 타입은
공개 경계 타입은 명시하고 지역 결과는 추론한다.
- tsc -p .로
tsc -p .로 tsconfig 전체 옵션을 적용한다.
- 타입 오류가 있으면
타입 오류가 있으면 noEmitOnError가 산출물을 막는다.
- 생성된 JavaScript를 Node에서
생성된 JavaScript를 Node에서 실행하고 런타임 규칙을 따로 검증한다.
컴파일 성공은 도메인 값의 정당성을 보장하지 않는다.
타입스크립트 파일 만들기
먼저, 여러분이 환경 설정을 위해 만들었던 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 파일을 자바스크립트로 변환(컴파일)하고 실행해봅시다.
터미널 열기:
VS Code의 상단 메뉴에서 터미널(Terminal) -> 새 터미널(New Terminal)을 선택하여 터미널을 엽니다.
타입스크립트 컴파일:
터미널에 다음 명령어를 입력하여 first-program.ts 파일을 컴파일합니다.
tsc first-program.ts이 명령어를 실행하면 first-program.ts와 동일한 폴더에 first-program.js라는 파일이 새로 생성됩니다.
이 first-program.js 파일은 여러분이 작성한 타입스크립트 코드가 순수한 자바스크립트로 변환된 결과물입니다.
VS Code에서 first-program.js 파일을 열어보면 타입 정보가 모두 제거된 것을 확인할 수 있습니다.
만약 tsc 명령어만 입력하면, tsconfig.json 파일 설정에 따라 프로젝트 내의 모든 .ts 파일을 컴파일합니다.
지금은 특정 파일만 컴파일했으니, first-program.ts만 변환됩니다.
자바스크립트 파일 실행: 이제 컴파일된 자바스크립트 파일을 Node.js 런타임을 사용하여 실행합니다.
node first-program.js터미널에 다음과 같은 메시지가 출력될 것입니다.
Hello, Explorer! We are embarking on the 2025 TypeScript Journey.
Current application status: Active for 2025 year.첫 번째 타입스크립트 프로그램에서 작성, 타입 검사, 자바스크립트 변환, 실행 결과 확인 흐름을 점검했습니다.
이후 장에서는 이 기본 흐름을 바탕으로 타입스크립트의 주요 기능과 적용 기준을 더 자세히 다룹니다.
다음 장에서는 타입스크립트의 핵심 개념인 타입 시스템에 대해 더 자세히 알아보겠습니다.
기본 타입부터 복잡한 타입까지, 타입을 정의하고 활용하는 방법을 살펴봅니다.
아래 다이어그램은 첫 .ts 파일이 타입 검사, 자바스크립트 변환, 실행으로 이어지는 흐름을 한 번 더 정리합니다.
첫 번째 타입스크립트 프로그램 작성를 코드에 적용하기 전, 컴파일 오류가 막아 줄 지점과 사람이 약속해야 할 지점을 나눕니다.
아래 다이어그램은 첫 TypeScript 프로그램에서 파일 작성, 타입 표기, 컴파일 실행이 어떻게 이어지는지 보여줍니다.
아래 다이어그램은 첫 TypeScript 프로그램을 작성할 때 파일 생성, 타입 주석, 컴파일, 실행 확인 순서로 점검합니다.