PHpullh
심층 가이드/TypeScript/Hello World

TYPESCRIPT · 심층 가이드

TypeScript Hello World 완전 정리

출력과 템플릿 문자열, 명령행 인자, 환경 변수까지 TypeScript로 첫 프로그램을 돌려 보는 10가지 기본 예제를 모았습니다.

주제 10개 · 예제 코드 포함 · 최종 수정 2026-09-03 · 작성 pullh 편집팀

TypeScript의 첫 관문은 문법이 아니라 실행 경로입니다. 브라우저도 Node도 .ts 파일을 직접 이해하지 못하므로, 컴파일해서 JavaScript로 바꾸거나 그 과정을 대신해 주는 실행기를 거쳐야 합니다. 처음 막히는 지점이 대개 여기라, 예제를 보기 전에 자신이 어떤 방식으로 돌리고 있는지부터 정해 두는 편이 좋습니다.

Hello World 출력과 변수 값을 같이 출력, 템플릿 문자열 인사는 한 묶음으로 보면 문자열을 다루는 기본기가 정리됩니다. 이어지는 함수로 인사 만들기와 배열을 순회하며 인사에서 타입 표기가 처음 등장합니다. 명령행 인자 읽기와 환경 변수 읽기는 실행 환경에 의존하는 항목이라, 브라우저가 아니라 Node에서 돌린다는 전제를 확인하고 보십시오.

초보자가 가장 자주 만나는 오류는 process를 찾을 수 없다는 메시지입니다. TypeScript는 Node의 전역 객체를 기본으로 알지 못해서, Node 타입 정의를 개발 의존성으로 설치해야 process.argv나 process.env가 인식됩니다. 코드가 틀린 것이 아니라 타입 정보가 없는 상태이므로, 문법을 의심하기 전에 이 설치 여부부터 확인하십시오.

01Hello World 출력

console.log 한 줄로 고정된 문자열을 표준 출력에 내보냅니다. 새 프로젝트에서 컴파일과 실행 경로가 제대로 연결됐는지 확인하는 첫 단계입니다. TypeScript 파일은 그대로 실행되지 않으므로 tsc로 JavaScript를 만들거나 tsx 같은 실행기를 거쳐야 이 줄이 찍힙니다.

TypeScript code

// Hello World 출력
console.log("Hello, World 1!");
알아두면 좋은 점

console.log는 표준 출력으로 나가고 줄바꿈이 자동으로 붙으며, 인자를 여러 개 주면 공백으로 이어 붙여 출력합니다.

자주 하는 실수

.ts 파일을 node로 바로 실행하면 타입 문법을 이해하지 못해 실패하므로, 변환을 거치거나 전용 실행기를 써야 합니다.

02변수 값을 같이 출력

greet는 string을 받아 템플릿 리터럴로 인사말을 조립해 돌려주고, 그 결과를 출력합니다. 값 조립과 출력을 분리해 두면 반환값만 따로 테스트할 수 있습니다. 백틱 안의 ${name}은 문자열로 변환된 값을 끼워 넣으므로, 숫자를 넘겨도 오류 없이 이어 붙는 대신 타입 선언이 이를 막아 줍니다.

TypeScript code

// 변수 값을 같이 출력
function greet(name: string): string {
  return `Hello, ${name}`;
}
console.log(greet("Ada"));
알아두면 좋은 점

반환값을 만드는 함수와 출력을 분리해 두면, 화면에 찍지 않고도 반환 문자열만 비교하는 테스트를 쓸 수 있습니다.

자주 하는 실수

매개변수 타입을 적어 두지 않으면 객체가 들어왔을 때 Hello, [object Object]가 그대로 출력됩니다.

03함수로 인사 만들기

string[]으로 타입을 붙인 배열을 만든 뒤 for...of로 이름을 하나씩 출력합니다. 목록을 순회하면서 각 항목을 처리하는 가장 직접적인 반복 형태입니다. for...in을 쓰면 값이 아니라 "0", "1" 같은 인덱스 문자열이 나오므로 배열에는 for...of가 맞습니다.

TypeScript code

// 함수로 인사 만들기
const names: string[] = ["Ada", "Grace", "Linus"];
for (const name of names) console.log(name);
알아두면 좋은 점

for...of는 인덱스가 필요 없을 때 가장 짧고, 인덱스도 함께 쓰려면 entries()로 짝을 꺼내면 됩니다.

자주 하는 실수

for...in을 배열에 쓰면 값 대신 '0' 같은 인덱스 문자열이 나오고, 배열에 붙인 다른 속성까지 순회에 섞입니다.

04배열을 순회하며 인사

배열 순회 대신 process.env.APP_ENV를 읽고, 값이 없으면 process.version으로 대체해 출력합니다. 실행 환경 구분값이 주입됐는지, 아니면 어떤 Node 버전에서 도는지 한 줄로 확인할 수 있습니다. process.env의 값은 항상 문자열이거나 undefined라서, 숫자로 쓰려면 직접 변환해야 합니다.

TypeScript code

// 배열을 순회하며 인사
console.log(process.env.APP_ENV ?? process.version);
알아두면 좋은 점

process.version은 v가 붙은 문자열이므로, 버전을 숫자로 비교하려면 앞 글자를 떼고 점 단위로 나눠야 합니다.

자주 하는 실수

환경 변수 값은 언제나 문자열이라 포트 번호 같은 값을 그대로 숫자와 비교하면, 의도한 크기 비교가 되지 않습니다.

05명령행 인자 읽기

명령행 인자를 읽는 코드는 없고 고정 문자열만 출력합니다. 인자 처리를 붙이기 전에 실행 자체가 되는지부터 확인하는 지점으로 보면 됩니다. 인자를 받으려면 process.argv가 필요하고, 이를 쓰는 순간 @types/node가 없으면 컴파일이 실패합니다.

TypeScript code

// 명령행 인자 읽기
console.log("Hello, World 5!");
알아두면 좋은 점

실행 자체가 되는지 먼저 확인해 두면, 이후 문제가 생겼을 때 원인이 빌드 설정인지 로직인지 바로 갈라집니다.

자주 하는 실수

process를 쓰는 순간 @types/node가 없으면 컴파일이 실패하므로, 개발 의존성에 미리 넣어 두어야 합니다.

06템플릿 문자열 인사

템플릿 문자열을 쓰는 부분은 greet 안의 백틱 표현식이며, 호출 결과가 콘솔로 나갑니다. 이름처럼 값이 달라지는 부분이 끼어드는 문자열은 덧셈보다 이 문법이 읽기 좋습니다. 백틱 문자열은 줄바꿈을 그대로 보존하므로 코드 들여쓰기가 출력에 섞여 들어가는 일이 흔합니다.

TypeScript code

// 템플릿 문자열 인사
function greet(name: string): string {
  return `Hello, ${name}`;
}
console.log(greet("Ada"));
알아두면 좋은 점

${} 안에는 어떤 식이든 넣을 수 있지만, 표현식이 길어지면 미리 변수로 빼는 편이 읽기에 훨씬 좋습니다.

자주 하는 실수

여러 줄 템플릿을 들여쓴 코드 안에 쓰면 앞쪽 공백까지 문자열에 포함되어, 출력이 의도치 않게 밀려 나옵니다.

07유니코드 메시지 출력

유니코드 처리 코드는 없고, 영문 이름 세 개가 담긴 배열을 순회해 각각 출력합니다. 다국어 문자열을 다루더라도 배열과 반복 자체는 이 모양 그대로입니다. 문자열의 length는 코드 포인트가 아니라 UTF-16 단위를 세므로, 이모지가 들어가면 눈에 보이는 글자 수와 어긋납니다.

TypeScript code

// 유니코드 메시지 출력
const names: string[] = ["Ada", "Grace", "Linus"];
for (const name of names) console.log(name);
알아두면 좋은 점

코드 포인트 단위로 세거나 자르려면 [...str]처럼 펼치면 되고, 이렇게 하면 이모지도 한 글자로 다뤄집니다.

자주 하는 실수

str.length는 UTF-16 단위를 세므로 이모지가 2로 계산되어, 길이 제한 검사가 눈에 보이는 글자 수와 어긋납니다.

08환경 변수 읽기

??로 APP_ENV와 process.version 중 하나를 골라 찍는 짧은 진단 코드입니다. 배포된 프로세스가 어떤 설정으로 떴는지 확인할 때 첫 줄로 넣기 좋습니다. ||였다면 빈 문자열도 거짓으로 취급돼 대체값이 나갔겠지만, ??는 빈 문자열을 값으로 인정합니다.

TypeScript code

// 환경 변수 읽기
console.log(process.env.APP_ENV ?? process.version);
알아두면 좋은 점

??는 왼쪽이 null이나 undefined일 때만 오른쪽을 평가하므로, 대체값을 만드는 비용이 클 때도 낭비가 없습니다.

자주 하는 실수

||로 바꾸면 빈 문자열도 거짓으로 취급돼 대체값이 나가므로, 일부러 비워 둔 설정이 무시됩니다.

09컬렉션 요약 출력

컬렉션을 요약하지는 않고 문자열 하나를 그대로 출력합니다. 집계 로직을 붙이기 전 뼈대만 세워 둔 상태로 이해하면 됩니다. console.log에 객체나 배열을 넘기면 문자열로 이어 붙이지 않고 구조를 펼쳐 보여 주므로, 요약 출력에는 별도 가공이 필요합니다.

TypeScript code

// 컬렉션 요약 출력
console.log("Hello, World 9!");
알아두면 좋은 점

요약을 한 줄로 남기려면 필요한 필드만 골라 문자열로 만들거나 JSON.stringify를 거치는 편이 로그 검색에 유리합니다.

자주 하는 실수

console.log에 넘긴 객체는 콘솔에서 나중에 펼칠 때의 상태로 보일 수 있어, 출력 시점의 값이라고 믿으면 잘못된 결론을 냅니다.

10버전 정보 출력

버전 정보 대신 greet("Ada")의 반환값을 출력합니다. 값을 만드는 함수와 그것을 화면에 내보내는 코드를 나눠 두는 습관은 규모가 커질수록 효과가 큽니다. 반환 타입 string을 적어 두었기 때문에, 실수로 undefined가 나갈 수 있는 분기를 추가하면 컴파일러가 먼저 지적합니다.

TypeScript code

// 버전 정보 출력
function greet(name: string): string {
  return `Hello, ${name}`;
}
console.log(greet("Ada"));
알아두면 좋은 점

값을 만드는 함수와 출력하는 코드를 나눠 두면, 나중에 출력 대상을 파일이나 로거로 바꿀 때 함수는 그대로 쓸 수 있습니다.

자주 하는 실수

반환 타입을 적어 두지 않으면 분기 하나가 값을 돌려주지 않아도 통과해, undefined가 그대로 출력됩니다.

정리하며

  • ts 파일은 직접 실행되지 않으므로 컴파일 또는 실행기 경로를 먼저 정합니다
  • 명령행 인자와 환경 변수 예제는 브라우저가 아닌 Node 전제입니다
  • process를 찾을 수 없다는 오류는 Node 타입 정의 미설치가 원인입니다
  • 템플릿 문자열은 값과 문자열을 섞는 가장 읽기 쉬운 방법입니다

더 깊이 들어가고 싶다면 TypeScript 학습 라이브러리에서 다른 주제 가이드를 이어서 보거나, 언어 비교에서 같은 개념이 다른 언어에서 어떻게 표현되는지 확인해 보세요.