타입스크립트란? (정적 타입과 자바스크립트)

타입스크립트는 마이크로소프트가 만든 "자바스크립트의 진화형(슈퍼셋)"입니다. 이름 그대로 자바스크립트의 모든 기능을 포함하면서 "타입(Type)"이라는 깐깐한 경비원을 추가한 언어입니다.

// 자바스크립트: 코드를 실행해야만 에러를 발견함 (동적 타입)
let message = "Hello";
message = 123; // 갑자기 숫자로 바꿔도 아무 경고 없음

// 타입스크립트: 코드를 짜는 순간 에러를 잡아줌 (정적 타입)
let greeting: string = "Hello";
// greeting = 123; // IDE에서 빨간 줄 발생! "Type \'number\' is not assignable to type \'string\'"

타입스크립트 실행 (Compile & Run)

브라우저나 Node.js는 TypeScript(TS) 코드를 직접 이해할 수 없습니다. 따라서 TS 코드를 순수한 JavaScript(JS) 코드로 변환(컴파일)해주는 과정이 반드시 필요합니다.

타입스크립트를 로컬(내 컴퓨터) 환경에서 실행하는 가장 대표적인 두 가지 방식입니다.

정석 컴파일 (tsc): tsc 파일명.ts 명령어를 실행하면, 엄격하게 타입 검사를 진행한 뒤 브라우저가 읽을 수 있는 파일명.js 파일을 뱉어냅니다. 이후 생성된 js를 실행합니다.
실시간 실행 (tsx): 개발 중일 때 매번 변환하고 실행하는 2단계 과정이 귀찮을 수 있습니다. npx tsx 파일명.ts를 치면 메모리 위에서 컴파일과 실행을 한방에 처리하여 바로 결과만 띄워줍니다.

bash - 터미널 명령어

# 1. 타입스크립트 전역 설치 (최초 1회만 필요)
npm install -g typescript

# 2. tsc 명령어로 컴파일 (hello.ts -> hello.js 변환)
tsc hello.ts

# 3. 변환된 자바스크립트 파일 실행
node hello.js

# 💡 실무 꿀팁: 변환과 실행을 한 번에 원스톱으로! (tsx 라이브러리)
npx tsx hello.ts

첫 번째 타입스크립트 실행해보기

아래의 코드는 Minstudio의 컴파일 엔진을 통해 실제로 브라우저 상에서 타입스크립트가 변환되어 실행된 결과입니다. 하단의 Developer Console 탭에서 console.log의 출력을 직접 확인해보세요!

// 간단한 덧셈 함수 정의 (타입 지정)
function addNumbers(a: number, b: number): number {
    return a + b;
}

const num1: number = 10;
const num2: number = 20;
const result: number = addNumbers(num1, num2);

console.log("🚀 타입스크립트 컴파일 및 실행 성공!");
console.log(`${num1} + ${num2} = ${result}`);

🔒 localhost:8000/preview

// 자바스크립트: 코드를 실행해야만 에러를 발견함 (동적 타입) let message = "Hello"; message = 123; // 갑자기 숫자로 바꿔도 아무 경고 없음 // 타입스크립트: 코드를 짜는 순간 에러를 잡아줌 (정적 타입) let greeting: string = "Hello"; // greeting = 123; // IDE에서 빨간 줄 발생! "Type \'number\' is not assignable to type \'string\'"

# 1. 타입스크립트 전역 설치 (최초 1회만 필요) npm install -g typescript # 2. tsc 명령어로 컴파일 (hello.ts -> hello.js 변환) tsc hello.ts # 3. 변환된 자바스크립트 파일 실행 node hello.js # 💡 실무 꿀팁: 변환과 실행을 한 번에 원스톱으로! (tsx 라이브러리) npx tsx hello.ts

// 간단한 덧셈 함수 정의 (타입 지정) function addNumbers(a: number, b: number): number { return a + b; } const num1: number = 10; const num2: number = 20; const result: number = addNumbers(num1, num2); console.log("🚀 타입스크립트 컴파일 및 실행 성공!"); console.log(`${num1} + ${num2} = ${result}`);