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

앞 글에서 만든 ts-first 프로젝트에 두 번째 파일을 더해, 변수와 함수에 타입을 붙인 작은 프로그램을 만들어 봅니다. 코드를 쓰는 동안 편집기가 보여 주는 정보와, tsc로 검사하고 컴파일하는 과정, 만들어진 자바스크립트를 실행하는 과정을 하나씩 나누어 확인합니다.

아래 그림처럼 이 흐름은 세 단계로 나뉩니다. 소스 파일을 쓰는 단계, 설정에 따라 검사하고 자바스크립트를 내보내는 단계, Node.js가 내보낸 파일을 실행하는 단계입니다. 검사의 성공과 실행의 결과는 서로 다른 질문이므로, 각 단계에서 무엇을 확인하는지 구분해 두면 문제가 생겼을 때 원인을 빨리 찾을 수 있습니다.

변수와 함수에 타입 붙이기

ts-first 폴더에 first-program.ts를 만들고 다음 코드를 씁니다. 타입스크립트 파일은 보통 .ts 확장자를 쓰며, 파일 이름은 자유롭게 정해도 됩니다.

const appName: string = "TypeScript Journey";
const currentYear: number = 2025;
const isActive: boolean = true;

function createWelcomeMessage(name: string, year: number): string {
  return `Hello, ${name}! We are embarking on the ${year} ${appName}.`;
}

const greeting = createWelcomeMessage("Explorer", currentYear);
console.log(greeting);

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

변수 이름 뒤에 콜론(:)과 타입을 쓰면 그 변수에 들어갈 값의 종류를 정합니다. appName에는 문자열(string)만, currentYear에는 숫자(number)만, isActive에는 참과 거짓(boolean)만 넣을 수 있습니다. 값을 다시 넣지 않을 변수이므로 let 대신 const로 선언했습니다.

함수에서는 매개변수마다 타입을 쓰고, 괄호 뒤의 : string으로 반환값의 타입을 정합니다. createWelcomeMessage는 문자열 name과 숫자 year를 받아 문자열을 돌려주어야 하므로, 본문에서 실수로 숫자를 돌려주면 컴파일러가 진단합니다. 연도 2025는 예제에 고정한 값이어서, 실행하는 날짜와 관계없이 출력은 같습니다.

편집기에서 확인하기

VS Code에서 greeting에 마우스를 올리면 const greeting: string이 표시됩니다. greeting에는 타입을 쓰지 않았지만, 타입스크립트가 createWelcomeMessage의 반환 타입에서 string을 추론한 것입니다. 모든 곳에 타입을 쓰지 않아도, 추론된 타입으로 같은 검사를 받습니다.

이번에는 파일의 끝에 다음 줄을 15번째 줄로 잠시 추가해 봅니다.

const invalidYear: number = "Two Thousand Twenty-Five";

first-program.ts:15:7 - error TS2322: Type 'string' is not assignable to type 'number'.

편집기는 저장하기 전부터 invalidYear 아래에 빨간 밑줄을 긋고, 문제(Problems) 패널에 같은 내용을 보여 줍니다. 위의 한 줄은 같은 파일을 tsc로 검사했을 때의 진단으로, 파일 이름 뒤의 15:7은 15번째 줄의 7번째 글자인 invalidYear에서 문제가 생겼다는 뜻입니다. 확인했으면 이 줄을 지우고 다음으로 넘어갑니다.

검사하고 실행하기

tsconfig.json의 include는 지금 index.ts만 고르므로, 새 파일도 검사하도록 목록에 더합니다. 나머지 설정은 앞 글과 같습니다.

{
  "compilerOptions": {
    "target": "es2022",
    "module": "nodenext",
    "strict": true,
    "noEmitOnError": true,
    "outDir": "dist"
  },
  "include": ["index.ts", "first-program.ts"]
}

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

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

검사에 오류가 없으면 첫 명령은 아무것도 출력하지 않고, 둘째 명령은 dist 폴더에 index.js와 first-program.js를 만듭니다. 셋째 명령은 first-program.js를 실행해 환영 문장 한 줄과, isActive가 참이어서 실행된 상태 안내 한 줄을 출력합니다. 실행할 파일이 dist 아래에 있다는 점을 놓치면, 다른 위치에 남아 있는 예전 파일을 실행하게 되므로 경로를 정확히 씁니다.

파일 이름을 직접 지정하는 tsc first-program.ts는 이 폴더에서 다르게 동작합니다. TypeScript 5.x는 파일을 지정하면 tsconfig.json을 조용히 무시하고 기본 설정으로 컴파일했지만, 6.0부터는 설정 파일이 있는 폴더에서 이 명령을 오류로 멈춥니다.

tsc first-program.ts

error TS5112: tsconfig.json is present but will not be loaded if files are specified on commandline. Use '--ignoreConfig' to skip this error.

이 진단이 나오면 새 출력은 만들어지지 않습니다. 설정 파일을 무시하는 실험이 꼭 필요할 때만 tsc --ignoreConfig first-program.ts를 쓰며, 이때는 noEmitOnError와 outDir 같은 프로젝트의 설정이 적용되지 않아 출력 파일이 소스 옆에 생깁니다. 이 변경은 공식 TypeScript 6.0 릴리스 노트에 있습니다.

정리

• 변수와 매개변수 뒤의 : 타입은 들어갈 값의 종류를, 함수 괄호 뒤의 : 타입은 반환값의 종류를 정합니다.
• 타입을 쓰지 않은 변수도 초기값이나 함수의 반환 타입에서 추론된 타입으로 검사되며, 편집기에서 마우스를 올려 확인할 수 있습니다.
• tsc의 진단은 파일:줄:글자 - error TS번호: 메시지의 모양으로, 문제가 생긴 위치와 종류를 알려 줍니다.
• 프로젝트는 tsc -p .으로 검사하고 출력하며, 실행은 outDir에 생긴 파일로 합니다.
• TypeScript 6.0부터 설정 파일이 있는 폴더에서 파일을 지정해 컴파일하면 TS5112로 멈추고, 설정을 무시하려면 --ignoreConfig를 따로 써야 합니다.

연습 문제

1. 값을 바꾼 프로그램

검사에 성공한 상태에서 currentYear를 2026으로, isActive를 false로 바꾸었습니다. greeting의 추론된 타입은 바뀌나요? 다시 검사하고 출력한 프로그램은 무엇을 출력하나요?

2. 반환 타입을 쓴 이유

createWelcomeMessage의 본문을 실수로 return year;로 바꾸었습니다. 반환 타입 : string이 있을 때와, 반환 타입을 지웠을 때 진단은 각각 어디에서 나오나요?

3. 파일을 지정한 컴파일

ts-first 폴더에서 tsc first-program.ts를 실행했더니 TS5112가 나왔습니다. 프로젝트의 설정을 적용해 컴파일하려면 어떤 명령을 써야 하나요? tsc --ignoreConfig first-program.ts로 실행하면 무엇이 달라지나요?

다음 장의 기본 타입에서는 이 글에서 쓴 string, number, boolean을 포함해 타입스크립트의 기본 타입을 하나씩 살펴봅니다.