TypeScript란?

• Microsoft에서 2012년에 개발
• 모든 JavaScript 코드는 유효한 TypeScript 코드
• 컴파일 (Compile, 코드를 변환하는 과정) 시 순수 JavaScript로 변환
• 현재 가장 인기 있는 프로그래밍 언어 중 하나

JavaScript와의 관계

왜 TypeScript를 사용하는가?

// 런타임 (Runtime, 프로그램 실행 중)에서야 에러 발견
function add(a, b) {
  return a + b;
}

add(1, "2");      // "12" (의도치 않은 결과)
add(1);           // NaN
add(1, 2, 3, 4);  // 3 (나머지 무시)

// 오타도 잡아내지 못함
const user = { name: "Kim" };
console.log(user.naem); // undefined

// 컴파일 타임 (Compile Time, 코드를 변환하는 시점)에 에러 감지
function add(a: number, b: number): number {
  return a + b;
}

add(1, "2");      // Error!
add(1);           // Error!
add(1, 2, 3, 4);  // Error!

// 오타를 즉시 감지
const user = { name: "Kim" };
console.log(user.naem); // Error!

TypeScript의 이점

TypeScript를 사용하는 프로젝트

TypeScript 설치하기

전역 설치

# npm으로 전역 설치
npm install -g typescript

# 설치 확인
tsc --version   # Version 5.x.x

프로젝트별 설치 (권장)

# 프로젝트 초기화
mkdir my-ts-project && cd my-ts-project
npm init -y

# 개발 의존성으로 설치
npm install --save-dev typescript

# ts-node도 함께 설치 (직접 실행용)
npm install --save-dev ts-node

tsconfig.json

TypeScript 프로젝트의 설정 파일

{
  "compilerOptions": {
    "target": "ES2020",          // 컴파일 대상 JS 버전
    "module": "commonjs",        // 모듈 (Module) 시스템
    "strict": true,              // 엄격한 타입 체크
    "esModuleInterop": true,     // ES 모듈 호환성
    "outDir": "./dist",          // 출력 디렉토리
    "rootDir": "./src",          // 소스 디렉토리
    "declaration": true,         // .d.ts 파일 생성
    "sourceMap": true            // 소스맵 생성
  },
  "include": ["src/**/*"],       // 포함할 파일
  "exclude": ["node_modules"]    // 제외할 파일
}

주요 tsconfig 옵션

첫 번째 TypeScript 프로그램

hello.ts

// hello.ts
function greet(name: string): string {
  return `안녕하세요, ${name}님! TypeScript에 오신 것을 환영합니다.`;
}

const message: string = greet("홍길동");
console.log(message);

// 타입 에러 예시 (주석 해제하면 컴파일 에러)
// greet(42);        // Error: Argument of type 'number'
                     // is not assignable to parameter of type 'string'

# 방법 1: 컴파일 후 실행
tsc hello.ts          # hello.js 생성
node hello.js         # 실행

# 방법 2: ts-node으로 직접 실행 (개발용)
npx ts-node hello.ts  # 컴파일 + 실행 한 번에

TypeScript 컴파일 과정

타입 어노테이션 (Type Annotation) 기초

변수, 매개변수 (Parameter), 반환값에 타입을 명시적으로 지정합니다.
어노테이션이란 "주석을 달다"라는 뜻으로, 변수 옆에 : 타입을 붙여서 "이 변수는 이 타입이야"라고 표시하는 것입니다.

// 변수 타입 어노테이션: 변수명 뒤에 ": 타입"을 붙임
let name: string = "김철수";  // name에는 문자열만 넣을 수 있음
let age: number = 25;          // age에는 숫자만 넣을 수 있음
let isStudent: boolean = true; // isStudent에는 true/false만 넣을 수 있음

// 배열 타입: 타입 뒤에 []를 붙임
let scores: number[] = [90, 85, 92];  // 숫자만 들어가는 배열
let names: string[] = ["Alice", "Bob"]; // 문자열만 들어가는 배열

// 함수 매개변수와 반환 타입: (매개변수: 타입): 반환타입
function multiply(x: number, y: number): number {
  return x * y;  // 숫자 두 개를 받아서 숫자를 반환
}

// 객체 타입: { 속성명: 타입 } 형태로 정의
let user: { name: string; age: number } = {
  name: "이영희",
  age: 30
};

타입 추론 (Type Inference)

// 타입 추론 - TypeScript가 자동으로 타입을 결정
let message = "Hello";    // string으로 추론
let count = 42;           // number로 추론
let active = true;        // boolean으로 추론

// 함수 반환 타입도 추론
function add(a: number, b: number) {
  return a + b;           // 반환 타입: number로 추론
}

// 배열 타입 추론
let numbers = [1, 2, 3];     // number[]로 추론
let mixed = [1, "hello"];    // (string | number)[]로 추론

// const는 더 좁은 타입으로 추론
const PI = 3.14;             // 타입: 3.14 (리터럴 (Literal) 타입 - 정확히 그 값만 허용)
const greeting = "hello";    // 타입: "hello" (리터럴 타입)

명시적 타입 vs 타입 추론

언제 타입을 명시하고, 언제 추론에 맡길까?

// 초기값이 있는 변수
let name = "Kim";
let age = 25;

// 간단한 함수 반환
function double(n: number) {
  return n * 2; // number 추론
}

// 함수 매개변수
function greet(name: string) { }

// 초기값 없는 변수
let result: number;

// 복잡한 반환 타입
function parse(s: string): User {
  return JSON.parse(s);
}

컴파일 전후 비교

interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return `Hi, ${user.name}!`;
}

const user: User = {
  name: "Kim",
  age: 25
};

console.log(greet(user));

// interface -> 완전히 제거됨



function greet(user) {
  return `Hi, ${user.name}!`;
}

const user = {
  name: "Kim",
  age: 25
};

console.log(greet(user));

Chapter 1 정리