📘 타입스크립트

1.1 타입스크립트란 무엇인가? 🤔

타입스크립트(TypeScript)는 마이크로소프트에서 개발한 프로그래밍 언어로, 쉽게 말해 "자바스크립트에 '타입(형식)'을 입힌 언어"입니다.

1.2 자바스크립트의 상위 집합(Superset)으로서의 위치 🔝

1.2.1. 상위 집합(Superset)이란 의미

수학에서 말하는 포함 관계를 생각하면 쉽습니다. 자바스크립트가 '작은 원'이라면, 타입스크립트는 그 자바스크립트를 완전히 포함하는 '더 큰 원'입니다. * 호환성: 모든 자바스크립트 코드는 유효한 타입스크립트 코드입니다. 즉, 기존 .js 파일의 확장자만 .ts로 바꿔도 문제없이 작동합니다. * 플러스 알파: 자바스크립트의 기존 문법 위에 '정적 타입 시스템'이라는 강력한 도구를 추가한 것입니다.

1.2.2. 왜 자바스크립트 위에 타입을 얹었을까?

자바스크립트는 매우 유연하지만, 규모가 커지면 어디서 어떤 에러가 날지 예측하기 어렵다는 단점이 있습니다. 타입스크립트는 이를 보완합니다. * 에러 사전 방지: 코드를 실행하기 전(컴파일 단계)에 오타나 잘못된 데이터 타입 사용을 잡아냅니다. * 가이드 역할: 변수나 함수가 어떤 데이터를 주고받는지 명시하기 때문에, 동료 개발자(혹은 미래의 나)가 코드를 훨씬 쉽게 이해할 수 있습니다. * 도구 지원: 자동 완성 기능이 비약적으로 좋아져서 개발 속도와 정확도가 올라갑니다.

1.2.3. 동작 방식: 브라우저는 이해하지 못한다? ⚙️

브라우저는 타입스크립트를 직접 읽지 못합니다. 그래서 '컴파일(또는 트랜스파일)' 과정이 필요합니다. 1. .ts 파일로 코드를 짭니다 2. 컴파일러가 타입을 체크하고 에러를 확인합니다 3. 이상이 없으면 타입을 제거한 순수 .js 파일로 변환합니다 4. 브라우저는 이 최종적인 자바스크립트 파일을 실행합니다

1.3 동적 타입 언어(JS)와 정적 타입 언어(TS)의 차이 ⚖️

동적 타입(JS)과 정적 타입(TS)의 가장 큰 차이는 '타입을 언제 결정하느냐'와 '에러를 언제 발견하느냐'에 있습니다.

1.3.1. 자바스크립트 (동적 타입) 🏃

변수 하나에 숫자도 넣었다가, 문자열도 넣을 수 있습니다.

let value = 10;      // 처음엔 숫자
value = "안녕";      // 갑자기 문자열로 바꿔도 OK (실행 전까지 문제 모름)

1.3.2. 타입스크립트 (정적 타입) 🛡️

변수를 만들 때 어떤 타입이 들어갈지 미리 약속합니다.

let value: number = 10;
value = "안녕";      // 에러 발생! "숫자 타입에 문자열을 넣을 수 없습니다."

2.1 기본 자료형 📋

2.1.1. string: 텍스트 데이터를 저장

let userName: string = "Alice";
let greeting: string = `Hello, ${userName}`; // 템플릿 리터럴도 가능

2.1.2. number: 정수, 실수 구분 없이 모든 숫자 저장

let age: number = 25;
let pi: number = 3.14;

2.1.3. boolean: 참(true) 또는 거짓(false)

let isLoggedIn: boolean = true;
let hasToken: boolean = false;

2.1.4. null & undefined

보통 단독으로 쓰기보다 "값이 없음"을 명시할 때 사용합니다.

let empty: null = null;
let notFound: undefined = undefined;

2.2 배열(Array)과 튜플(Tuple) 🏗️

배열과 튜플은 데이터를 구조화할 때 핵심적인 역할을 합니다. 특히 배열은 같은 타입의 목록을, 튜플은 정해진 순서와 개수의 목록을 다룰 때 사용합니다.

2.2.1 배열 타입 선언 방식: type[] vs Array

// 방법 1: 타입[] (가장 많이 쓰임)
const productList: string[] = ["아이폰", "갤럭시", "맥북"];

// 방법 2: Array<타입> (제네릭 방식)
const priceList: Array<number> = [1000, 2000, 3000];

2.2.2 객체 배열 📦

보통 서버에서 데이터를 받아오는 '회원 목록', '상품 리스트' 같은 형태

2.2.2.1. 객체 배열을 다루는 방법 : [1. 객체의 생김새 정의] → [2. 배열에 적용]

• interface와 []의 조합 (가장 많이 쓰임)

// 1. 객체의 설계도(Interface) 작성
interface User {
  id: number;
  name: string;
}

// 2. 해당 타입을 배열에 적용하기
const users: User[] = [
  { id: 1, name: "Kim" },
  { id: 2, name: "Lee" }
];

users.push({ id: 3, name: "Park" }); // 자유롭게 추가 가능

• type 별칭과 Array<>의 조합

type User = {
  id: number;
  name: string;
};

const users: Array<User> = [
  { id: 1, name: "Kim" }
];

• 유연한 타입 정의 (선택적 속성). 이때는 ?를 사용합니다

interface User {
  id: number;
  name: string;
  email?: string; // 이메일은 값이 있는 경우 String, 없으면 undefined (undefined 가능)
}

const userList: User[] = [
  { id: 1, name: "Kim", email: "kim@test.com" },
  { id: 2, name: "Lee" } // email이 없어도 에러가 나지 않음
];

• 읽기 전용 배열 (Readonly)

const colors: readonly string[] = ["Red", "Blue"];
colors.push("Green"); // 에러! (추가 불가능)

2.2.3 튜플 (Tuple) 🍱

• 튜플(Tuple) 은 한마디로 '순서와 개수가 정해진 데이터 묶음'을 뜻하는 수학/컴퓨터 공학 용어입니다. 일상생활로 비유하자면 '세트 메뉴' 와 비슷합니다.
  "햄버거 세트"라고 하면 [햄버거, 콜라, 감자튀김]이라는 순서와 구성이 딱 정해져 있는 것과 같습니다.

• 타입스크립트에서 튜플은 배열의 하위 타입으로, 요소의 개수가 고정되고 각 요소의 타입이 미리 정해진 배열을 의미합니다.

2.2.3.1 기본 선언과 할당 📍

각 인덱스에 들어갈 타입을 순서대로 명시합니다.

let person: [string, number];

person = ["Alice", 30]; // ✅ OK
// person = [30, "Alice"]; // ❌ Error: 순서가 다름
// person = ["Alice", 30, true]; // ❌ Error: 정해진 길이를 초과함

2.2.3.2 선택적 요소 (Optional Elements) ❓

특정 요소가 있을 수도 있고 없을 수도 있다면 ?를 사용합니다. 단, 선택적 요소는 항상 뒤쪽에 위치해야 합니다.

let point: [number, number, number?];

point = [10, 20];      // ✅ OK
point = [10, 20, 30];  // ✅ OK

2.2.3.3 나머지 요소 (Rest Elements) 🌊

튜플의 일부분만 타입을 지정하고, 나머지는 가변적으로 처리하고 싶을 때 사용합니다.

let logger: [string, ...number[]];

logger = ["Error", 404, 500, 502]; // ✅ 첫 번째는 문자열, 나머지는 숫자 배열

2.2.3.4 읽기 전용 튜플 (Readonly Tuple) 🔒

튜플은 일반 배열처럼 push나 pop이 가능하여 고정된 길이가 깨질 위험이 있습니다. 이를 완전히 방지하려면 readonly를 붙여야 합니다.

const readOnlyTuple: readonly [number, string] = [1, "Fixed"];
// readOnlyTuple.push(2); // ❌ Error: 'readonly' 타입에는 push 메서드가 없음

2.2.3.5 라벨링된 튜플 (Labeled Tuple Elements) 🏷️ [권장]

각 요소가 무엇을 의미하는지 이름을 붙여 가독성을 높일 수 있습니다.

type UserInfo = [id: number, name: string, email: string];

const user: UserInfo = [1, "Kim", "kim@example.com"];

2.2.3.6 💡 튜플 vs 인터페이스/객체 ⚖️

데이터를 다룰 때 객체({})를 쓸지 튜플([])을 쓸지 고민된다면 다음 기준을 참고하세요.

• 객체: 데이터의 의미가 키(Key) 이름으로 설명되어야 할 때 (대부분의 데이터 구조).
• 튜플: 순서 자체가 중요한 의미를 갖거나, 2~3개의 짧은 데이터를 빠르게 넘길 때 (예: 좌표 [x, y], 상태 관리 [state, setter]).

🚀 2.3 추가된 타입 (TS 전용 시스템 타입)

📦 2.3.1 열거형(Enum)

Enum(열거형)은 연관된 아이템들을 하나의 집합으로 묶어 관리할 때 사용합니다.
코드의 가독성을 높이고, 정해진 값 외에 다른 값이 들어오지 못하게 제한하는 역할을 합니다.

🚦 2.3.1.1 상태 코드 관리

가장 대표적인 예시는 주문 상태, 유저 권한, HTTP 응답 처리 등입니다.

// 1. 선언: 주문 상태를 정의
enum OrderStatus {
  Pending = "PENDING",     // 대기 중
  Shipped = "SHIPPED",     // 배송 중
  Delivered = "DELIVERED", // 완료
  Cancelled = "CANCELLED"  // 취소
}

// 2. 활용: 함수 인자에 타입으로 사용
function updateOrderStatus(id: number, status: OrderStatus) {
  console.log(`주문번호 ${id}의 상태를 ${status}로 변경합니다.`);
}

// 사용 예시
updateOrderStatus(1024, OrderStatus.Shipped); 

// 에러 발생: 정의되지 않은 문자열은 넣을 수 없음
// updateOrderStatus(1025, "READY"); 

⚡ 2.3.1.2 const enum

const를 붙이면 컴파일 시점에 Enum 객체를 만들지 않고 값을 직접 채워 넣어 자바스크립트 코드가 훨씬 가벼워집니다.

const enum Role {
  Admin = "ADMIN",
  User = "USER"
}

⚖️ 2.3.1.3 숫자형 Enum과 문자열 Enum의 차이

두 방식의 가장 큰 차이는 '값이 자동으로 할당되는가'와 '디버깅 시 얼마나 명확한가'에 있습니다.

1️⃣ 값의 자동 할당 (Auto-incrementing) * 숫자형 Enum: 값을 생략하면 0부터 시작해서 1씩 자동으로 증가합니다. * 문자열 Enum: 자동 할당이 없습니다. 모든 멤버의 값을 일일이 수동으로 넣어줘야 합니다.

// 숫자형: 0, 1, 2 자동 할당
enum Direction { Up, Down, Left } 

// 문자열: 반드시 명시해야 함
enum DirectionStr { 
  Up = "UP", 
  Down = "DOWN", 
  Left = "LEFT" 
}

2️⃣ 디버깅과 로그 (로그의 가독성) * 숫자형: 로그를 찍으면 0, 1 같은 숫자가 출력됩니다. 코드를 짠 사람이 아니면 이게 어떤 상태인지 알기 어렵습니다. * 문자열: 로그에 "UP", "DOWN" 처럼 의미가 명확한 텍스트가 찍힙니다. 데이터베이스를 보거나 에러 로그를 분석할 때 훨씬 유리합니다.

3️⃣ 역방향 매핑 (Reverse Mapping) * 숫자형: 이름으로 값을 찾을 수도 있고, 값으로 이름을 찾을 수도 있습니다. (Direction[0] -> "Up") * 문자열: 이름으로 값만 찾을 수 있습니다. 역방향 매핑을 지원하지 않아 더 안전하고 엄격합니다.

🔓 2.3.2 Any (무엇이든 허용)

모든 타입의 검사를 해제합니다. 자바스크립트와 다를 바 없게 만들어서 편리하지만, 타입스크립트를 쓰는 의미가 사라지므로 최대한 지양해야 합니다.

let value: any = 10;
value = "안녕"; // 에러 안 남
value.toUpperCase(); // 에러 안 남 (만약 숫자였다면 런타임 에러 발생 위험)

🔍 2.3.3 Unknown (안전한 Any)

• any처럼 어떤 타입의 값도 저장할 수 있지만, 사용하기 전에 반드시 타입을 확인(타입 가드)해야 합니다. any보다 훨씬 안전합니다.
• API 응답처럼 뭐가 올지 진짜 모를 때 사용합니다.

let value: unknown = "Hello";

// value.toUpperCase(); // 에러! (unknown 타입이라 바로 사용 불가)

if (typeof value === "string") {
  value.toUpperCase(); // 타입 확인을 했으므로 이제 사용 가능!
}

💨 2.3.4 Void (비어있음)

• 함수가 아무것도 반환하지 않을 때 사용합니다.
• return 문이 없는 함수나, 단순히 콘솔만 찍는 함수에서 사용합니다.

function sayHi(): void {
  console.log("Hi!");
  // return 1; // 에러! 반환값이 있으면 안 됨
}

🚫 2.3.5 Never (절대 일어날 수 없음)

함수가 끝나지 않거나, 항상 에러를 던져서 반환값이라는 개념 자체가 존재할 수 없을 때 사용합니다.
무한 루프, 의도적인 에러 발생 함수에서 사용됩니다.

function throwError(msg: string): never {
  throw new Error(msg); // 함수가 끝나지 않고 여기서 멈춤
}

function infiniteLoop(): never {
  while (true) {} // 영원히 실행됨
}

3.1 Interface의 기본 구조 🏗️

인터페이스는 interface 키워드를 사용하여 정의하며, 객체가 가져야 할 속성(Property)과 메서드(Method)를 명시합니다.

interface User {
  id: number;
  name: string;
  email: string;
}

const worker: User = {
  id: 1,
  name: "Kim",
  email: "kim@example.com"
};

3.2 객체의 형태(Shape) 정의 📐

'객체의 형태(Shape)를 정의한다'는 말은, 해당 객체가 어떤 이름의 키(Key)를 가지고 있고, 그 키에 어떤 타입의 값(Value)이 담겨야 하는지를 미리 결정해두는 것을 의미합니다.

3.2.1 설계도(Blueprint)로서의 역할 📋

현실 세계에서 건물을 지을 때 설계도가 필요하듯, 코드에서 객체를 만들 때 "이 객체는 반드시 id는 숫자여야 하고, name은 문자열이어야 해" 라고 규정하는 것입니다.

// 1. 형태(Shape)를 인터페이스로 정의
interface Product {
  name: string;
  price: number;
}

// 2. 정의된 형태에 맞춰 객체 생성
const laptop: Product = {
  name: "MacBook Pro",
  price: 2500000
};

// ❌ 에러 발생: Product 형태에 없는 'color'를 넣거나 타입을 틀리면 감지함
const phone: Product = {
  name: "iPhone",
  price: "150만원", // Error: 'string'은 'number' 타입에 할당할 수 없음
  color: "silver"   // Error: 'Product' 형식에 'color'가 없음
};

3.2.2 "덕 타이핑(Duck Typing)"과 구조적 타이핑 🦆

타입스크립트의 흥미로운 점은 '구조적 타이핑(Structural Typing)' 방식을 쓴다는 것입니다. 이름이 달라도 내부 구조(Shape)가 같으면 같은 타입으로 인정해 줍니다.

interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// 명시적으로 Point 인터페이스를 쓰지 않았지만, 형태(Shape)가 같으므로 통과!
const myObj = { x: 10, y: 20, z: 30 }; 
printPoint(myObj); 

3.3 선택적 속성(?)과 읽기 전용 속성(readonly) 🔒

3.3.1 선택적 속성 (Optional Properties: ?) ❓

속성 이름 뒤에 물음표(?)를 붙여서 정의합니다. 해당 속성이 객체에 있어도 되고 없어도 될 때 사용합니다.

• 실무 활용: 회원가입 시 필수 정보(ID, 비밀번호)와 선택 정보(자기소개, 웹사이트 주소)를 구분할 때 자주 쓰입니다.
• 특징: 값을 넣지 않으면 자동으로 undefined가 할당된 것처럼 취급됩니다.

interface UserProfile {
  id: string;          // 필수
  nickname: string;    // 필수
  bio?: string;        // 선택 (있을 수도, 없을 수도 있음)
  website?: string;    // 선택
}

const user1: UserProfile = {
  id: "user01",
  nickname: "태권브이"
  // bio와 website가 없어도 에러가 나지 않습니다.
};

3.3.2 읽기 전용 속성 (Readonly Properties: readonly) 🛑

속성 이름 앞에 readonly 키워드를 붙입니다. 객체가 처음 생성될 때만 값을 할당할 수 있고, 그 이후에는 값을 바꿀 수 없습니다.

• 실무 활용: API 키, 고유 ID, 설정값(Config) 등 프로그램 실행 중에 바뀌면 안 되는 중요한 데이터를 보호할 때 사용합니다.
• 특징: 런타임이 아닌 컴파일 단계에서 에러를 잡아줍니다.

interface Config {
  readonly apiKey: string;
  readonly domain: string;
}

const myConfig: Config = {
  apiKey: "ABC-12345",
  domain: "https://example.com"
};

// ❌ 에러 발생: 읽기 전용 속성이므로 수정할 수 없습니다.
myConfig.apiKey = "XYZ-99999"; 

3.3.3 (참조) ReadonlyArray\ 타입 📚

• 배열 전체를 수정 불가능하게 만들고 싶을 때는 ReadonlyArray<number>를 사용합니다.
• push, pop 같은 배열 수정 메서드를 아예 사용할 수 없게 막아줍니다.

const numbers: ReadonlyArray<number> = [1, 2, 3];

// ❌ 에러 발생: 'push'가 존재하지 않음
numbers.push(4); 

3.4 동적 키를 다루는 인덱스 시그니처 (Index Signature) 🔑

인터페이스를 정의할 때, 속성의 이름(Key)을 미리 알 수 없거나 속성의 개수가 유동적일 때 사용하는 기능입니다.

3.4.1 기본 문법 📝

대괄호 [] 안에 키의 타입과 값의 타입을 정의합니다.

interface SalaryInfo {
  // [key: 키타입]: 값타입
  [role: string]: number;
}

const teamSalary: SalaryInfo = {
  developer: 5000,
  designer: 4500,
  manager: 5500,
  // 어떤 키를 추가해도 값이 숫자라면 통과됩니다.
};

3.4.2 실무에서 사용하는 이유 💡

• 동적 데이터 처리: API 응답에서 키 값이 사용자 ID나 날짜처럼 계속 변하는 데이터를 처리할 때 필수적입니다.
• 객체를 사전(Dictionary)처럼 쓸 때: 특정 카테고리별 데이터를 매핑할 때 유용합니다.

interface ErrorMessages {
  [code: string]: string;
}

const apiErrors: ErrorMessages = {
  "404": "페이지를 찾을 수 없습니다.",
  "500": "서버 에러가 발생했습니다.",
  "403": "권한이 없습니다.",
};

3.4.3 주의사항 및 규칙 ⚠️

1. 필수 속성과 함께 사용하기: 인덱스 시그니처가 있으면 다른 명시적 속성도 그 규칙을 따라야 합니다. typescript interface UserInventory { [itemName: string]: number; gold: number; // ✅ 가능 (인덱스 시그니처와 타입 일치) // username: string; // ❌ 에러: 인덱스 시그니처가 모든 값을 number로 규정했기 때문 }
2. 여러 타입 허용하기: 만약 값에 여러 타입을 넣고 싶다면 유니온 타입을 사용합니다. typescript interface FlexibleConfig { [key: string]: string | number | boolean; version: number; // ✅ 이제 string | number | boolean 범위 안에 있으므로 가능 }
3. 키의 타입: 인덱스 시그니처의 키 타입은 보통 string, number, symbol만 가능합니다.

3.4.4 (참조) Record\ 유틸리티 타입 🛠️

실무에서는 인덱스 시그니처를 직접 작성하는 대신, 타입스크립트에서 제공하는 Record를 써서 더 간결하게 표현하기도 합니다.

• interface Obj { [key: string]: number; }
• type Obj = Record<string, number>; (위와 동일한 의미)

3.5 Type Alias (타입 별칭) 사용법 🏷️

타입 별칭(Type Alias)은 말 그대로 특정 타입이나 인터페이스에 새로운 이름(별명)을 붙여주는 기능입니다.

3.5.1 기본 사용법 📝

객체뿐만 아니라 일반 변수 타입, 유니온 타입 등 모든 타입에 이름을 붙일 수 있습니다.

// 1. 기본 타입에 별칭 붙이기
type MyString = string;
const name: MyString = "Kim";

// 2. 객체 타입 정의 (Interface와 유사)
type User = {
  id: number;
  name: string;
};

const worker: User = { id: 1, name: "Kim" };

3.5.2 Interface vs Type Alias 🤝

실무에서 interface 대신 type을 쓰는 결정적인 이유는 바로 아래 기능들 때문입니다.

3.5.2.1 유니온 타입 (Union Types) 🚥

"A 이거나 B이다"라는 타입을 정의할 때 사용합니다. (Interface는 불가능)

type Status = "success" | "error" | "loading";

const currentStatus: Status = "success"; // ✅ OK
const wrongStatus: Status = "pending";  // ❌ 에러: 지정된 3개 문자열 외엔 허용 안 함

3.5.2.2 튜플 (Tuple) 📦

배열의 요소 개수와 각 순서의 타입을 고정할 때 사용합니다.

type Point = [number, number];
const coordinates: Point = [10, 20]; // ✅ OK

3.5.2.3 교차 타입 (Intersection Types) ➕

두 개 이상의 타입을 하나로 합칠 때 & 연산자를 사용합니다.

type Name = { name: string };
type Age = { age: number };

type Person = Name & Age; // { name: string, age: number } 와 같음

3.5.2.4 복잡한 타입 관리 ⚙️

API 호출 결과나 컴포넌트의 상태를 정의할 때 매우 직관적으로 작성할 수 있습니다.

type ResponseData = {
  id: number;
  content: string;
};

// 유니온과 객체 타입을 조합한 실무형 패턴
type ApiResponse = 

  | { status: "success"; data: ResponseData }
  | { status: "error"; message: string };

function handleResponse(response: ApiResponse) {
  if (response.status === "success") {
    console.log(response.data.content);
  } else {
    console.log(response.message);
  }
}

3.5.3 (참조) 상속(extends)? 🌲

인터페이스에서 사용하는 방식으로, 클래스의 상속 개념과 비슷합니다.

• 방식: 새로운 인터페이스가 기존 인터페이스의 속성을 물려받습니다.
• 특징 (엄격함): 부모와 자식 간에 속성 타입이 충돌하면 에러를 발생시켜 미리 방지합니다.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

// ❌ 충돌 발생 시 에러 interface Cat extends Animal { name: number; // Error: 'Animal'의 'name(string)'과 타입이 안 맞음! }

3.5.4 무엇을 써야 할까? 🤔

• 객체의 구조를 정의하고 상속(extends)이 빈번하다면? → Interface
• 유니온(|), 교차(&), 기본 타입 별칭이 필요하다면? → Type Alias

4.1. 함수 타입 정의 ✍️

4.1.1. 기본적인 함수 타입 정의

가장 기초적이면서도 필수적인 형태입니다. 인자와 반환 타입(Return Type)을 명시합니다.

function add(a: number, b: number): number {
  return a + b;
}

// 화살표 함수 방식
const multiply = (a: number, b: number): number => a * b;

4.1.2. 선택적 매개변수와 기본값 (Optional & Default) ⚙️

함수의 파라미터는 ?를 사용해 선택적으로 받거나, 기본값을 설정할 수 있습니다.

function greet(name: string, greeting?: string): string {
  return `${greeting || 'Hello'}, ${name}`;
}

console.log(greet("철수")); // "Hello, 철수"
console.log(greet("영희", "안녕")); // "안녕, 영희"

4.2. 함수 타입 별칭 (Function Type Alias) 🏷️

함수 자체의 타입을 미리 정의해두고 재사용하는 방식입니다. 콜백 함수를 정의할 때 실무에서 매우 많이 쓰입니다.

type Formatter = (text: string, uppercase: boolean) => string;

const myFormatter: Formatter = (str, isUpper) => {
  return isUpper ? str.toUpperCase() : str.toLowerCase();
};

4.3. 함수 오버로딩 (Function Overloading) 🔄

전달받는 인자의 타입에 따라 반환되는 타입이 달라질 때 사용합니다. API 응답 처리나 유틸리티 함수를 만들 때 유용합니다.

// 선언부: 어떤 조합이 가능한지 정의
function getValue(v: string): string;
function getValue(v: number): number;

// 구현부: 실제 로직 (any 또는 유니온 타입 사용)
function getValue(v: any): any {
  return v;
}

const str = getValue("ABC"); // 타입이 string으로 추론됨
const num = getValue(123);   // 타입이 number로 추론됨

4.4. 객체 구조 분해 할당 (Destructuring) 📦

React 컴포넌트의 Props나 복잡한 옵션 객체를 받을 때 가장 많이 사용하는 패턴입니다.

interface UserConfig {
  id: string;
  isAdmin: boolean;
}

// 인자 단계에서 타입을 바로 정의하거나 interface를 활용
function loginUser({ id, isAdmin }: UserConfig): void {
  console.log(`ID: ${id}, Admin: ${isAdmin}`);
}

4.4.1. 왜 이렇게 쓰나요? (Before vs After) 🤔

구조 분해 할당을 안 쓰면 매번 user.id, user.isAdmin처럼 객체명을 반복해서 써야 합니다.

// 구조 분해 할당 미사용
function loginUser(user: UserConfig) {
  console.log(user.id);      // 매번 user. 를 붙여야 함
  console.log(user.isAdmin);
}

// 구조 분해 할당 사용
function loginUser({ id, isAdmin }: UserConfig) {
  console.log(id);           // 바로 변수처럼 사용 가능!
  console.log(isAdmin);
}

4.4.2. 문법 상세 분석 🔍

({ id, isAdmin }: UserConfig)를 쪼개보면 이렇습니다.

• { id, isAdmin }: "인자로 객체가 들어올 텐데, 그 안의 id 속성과 isAdmin 속성을 찾아서 같은 이름의 변수로 만들어줘!"라는 명령입니다.
• : UserConfig: "그런데 그 객체는 UserConfig라는 타입 규격을 지켜야 해!"라는 타입 정의입니다.

4.5. 화살표 함수 🏹

4.5.1. 화살표 함수 (Arrow Functions)

타입스크립트에서 화살표 함수는 타입을 정의하는 방식이 두 가지입니다.

4.5.1.1. 함수 선언과 동시에 타입 정의 (가장 일반적)

const add = (a: number, b: number): number => a + b;

4.5.1.2. 변수에 함수 타입을 미리 지정 (추천!) ✨

type CalculateFn = (a: number, b: number) => number;

const multiply: CalculateFn = (a, b) => a * b; // 인자의 타입을 생략해도 자동으로 추론됨

4.6. Rest 파라미터 (나머지 매개변수) 🏗️

4.6.1. 인자의 개수가 정해지지 않았을 때 사용합니다.

타입스크립트에서는 Rest 파라미터가 반드시 배열 타입이어야 한다는 점이 핵심입니다.

// ...numbers: number[] 는 인자(매개변수)로 숫자들만 들어있는 배열을 받겠다.
// : number 는 이 함수는 계산을 끝내고 결과물로 숫자(number) 하나를 돌려주겠다!

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100

4.6.2. API 로거 (Rest + Destructuring) 🪵

특정 고정 인자와 나머지 옵션들을 묶어서 처리할 때 이 두 개념을 결합

interface LogOptions {
  level: 'info' | 'error' | 'warn';
  silent?: boolean;
}

// 첫 번째 인자는 message, 나머지는 여러 개의 옵션 객체들을 배열로 받음
const logMessage = (message: string, ...options: LogOptions[]) => {
  console.log(`[Message]: ${message}`);
  console.log(`[Options]:`, options);
};

logMessage(
  "서버 연결 성공", 
  { level: 'info' }, 
  { level: 'warn', silent: true }
);

4.7. 콜백(Callback) 함수의 타입 시그니처 정의 📞

콜백 함수는 다른 함수의 인자로 전달되는 함수를 말하죠. 타입스크립트에서는 이 콜백 함수가 "어떤 인자를 받고, 무엇을 반환하는지" 미리 규격(시그니처)을 정해둘 수 있습니다.

4.7.1. 기본 정의 방식 (인라인)

function processUserInput(name: string, callback: (n: string) => void) {
  // 1. name을 처리하고
  console.log(`사용자 이름: ${name}`);

  // 2. 처리가 끝나면 콜백 함수를 실행
  callback(name);
}

processUserInput("철수", (userName) => {
  console.log(`${userName}님, 환영합니다!`);
});

4.7.2. 별칭(Type Alias) 사용 방식 (실무 권장) 💡

실무에서는 콜백 타입이 복잡해지는 경우가 많아, 따로 이름을 붙여 정의하는 방식을 훨씬 선호합니다.

// 콜백 타입 정의 (설계도)
type Checker = (id: string, info: { role: string }) => boolean;

// 2. 실행 함수: 내부에서 객체를 만들어 콜백에 던져줌
const run = (id: string, callback: Checker) => {
  const isOk = callback(id, { role: 'admin' }); // 객체 전달!
  console.log(isOk ? "승인" : "거부");
};

// 3. 실제 사용: 던져준 객체(info)를 꺼내서 로직 짜기
run("user01", (id, info) => {
  return info.role === 'admin'; // admin이면 true 반환
});

4.7.3. 콜백이 선택 사항일 때 (?) ❓

콜백 함수를 줄 때도 있고 안 줄 때도 있다면 ?를 붙입니다. 이때 함수 내부에서 && 연산자나 조건문을 써서 안전하게 호출하는 게 국룰입니다.

function fetchData(url: string, onSuccess?: (data: any) => void) {
  // ... 데이터를 가져오는 로직 ...
  const data = { id: 1, content: "Hello" };

  // onSuccess가 있을 때만 실행해라! (&& 연산자 활용)
  onSuccess && onSuccess(data);
}

4.7.4. 가변 인자(...args)를 배열 타입으로 묶어 처리하기 🖇️

// ...tags 뒤의 : string[] 은 "문자열들만 모인 배열"이라는 뜻
// 반드시 number[], string[] 처럼 배열 형태로 써야 합니다
// 무조건 매개변수의 맨 마지막에 딱 한 번만 쓸 수 있습니다
function makeHashTags(...tags: string[]): string {

  // 함수 내부에서는 map, filter, reduce 같은 배열 메서드를 바로 쓸 수 있어 편합니다
  return tags.map(t => `#${t}`).join(' ');
}

// 1개를 넣든 3개를 넣든 'tags'라는 배열로 처리됨
console.log(makeHashTags("타입스크립트"));           // "#타입스크립트"
console.log(makeHashTags("JS", "TS", "React")); // "#JS #TS #React"

타입스크립트 클래스는 자바스크립트의 클래스 문법에 타입 정의와 접근 제어자가 추가된 형태입니다.

5.1 클래스 사용 시 핵심 체크리스트 ✅

• ** new 키워드**: 클래스는 설계도일 뿐이므로, 반드시 new 클래스명()으로 객체(인스턴스)를 만들어 사용해야 합니다.
• ** this 사용**: 클래스 내부의 변수나 메서드에 접근할 때는 반드시 this.을 붙여야 합니다.
• ** 초기화 필수**: 선언만 하고 값을 할당하지 않으면 에러가 납니다. (또는 name!: string처럼 확정 기호를 써야 함)

5.1.1 정석적인 선언 방법 📝

class Robot {
  // 1. 멤버 변수 타입 선언
  name: string;
  model: string;

  // 2. 생성자(Constructor) 정의
  constructor(name: string, model: string) {
    this.name = name;
    this.model = model;
  }

  // 3. 메서드 정의
  move(): void {
    console.log(`${this.name}(${this.model})이 움직입니다. 🤖`);
  }
}

// 사용 방법 (인스턴스 생성)
const myRobot = new Robot("태권V", "V1");
myRobot.move(); // "태권V(V1)이 움직입니다."

5.1.2 실무형 단축 선언 ⚡

실무에서는 위 방식이 번거로워 아래처럼 생성자 매개변수에 접근 제어자(public, private 등)를 직접 붙여서 변수 선언과 할당을 한 번에 끝냅니다.

class User {
  // 생성자에 접근 제어자를 붙이면 멤버 변수 선언 + 할당이 자동으로 됨!
  constructor(public nickname: string, private email: string) {}

  showInfo() {
    console.log(`이름: ${this.nickname}, 이메일: ${this.email} 👤`);
  }
}

const user = new User("꿀팁러", "tip@example.com");
console.log(user.nickname); // ✅ OK (public)
// console.log(user.email);   // ❌ 에러! (private이라 외부 접근 불가)

5.2 접근 제어자 3종 세트 🔐

class Employee {
  public name: string;             // 누구나 볼 수 있음
  private salary: number;          // 급여는 본인만(클래스 내부) 알 수 있음
  protected department: string;    // 부서 정보는 자식 클래스까지만 공유

  constructor(name: string, salary: number, department: string) {
    this.name = name;
    this.salary = salary;
    this.department = department;
  }

  public getSalaryInfo() {
    return `${this.name}의 급여는 비밀입니다. 🤫`; // 내부에서는 salary 접근 가능
  }
}

class Manager extends Employee {
  public changeDept(newDept: string) {
    this.department = newDept; // ✅ protected라서 자식은 접근 가능!
    // this.salary = 0;        // ❌ 에러! private은 자식도 접근 불가
  }
}

const worker = new Employee("김철수", 5000, "개발팀");
console.log(worker.name);       // ✅ OK
// console.log(worker.salary);  // ❌ 에러! (외부 접근 불가)

5.3 private vs JS의 # (무슨 차이?) 🤔

둘 다 외부 접근을 막지만 결정적인 차이가 있습니다.

• 5.3.1 private (TS 문법):
  • 컴파일 단계에서 에러를 잡아줍니다.
  • 실제 JS로 변환되면 일반 변수와 똑같이 보입니다 (런타임 강제력은 없음).
• 5.3.2 # (JS 표준 문법):
  • 런타임(실행 시점)에서도 완전히 숨겨집니다.
  • 브라우저 자체에서 아예 접근을 못 하게 막아버립니다.

5.4 추상 클래스 (Abstract Class) 🧱

추상 클래스는 한마디로 '미완성 설계도'입니다. 스스로 객체를 만들 수는 없지만, 자식 클래스들이 반드시 가져야 할 공통 기능을 물려주는 역할을 합니다.

5.4.1 abstract 키워드를 이용한 공통 뼈대 구축

추상 클래스 안에는 일반 메서드(구현 완료)와 추상 메서드(이름만 정의)를 섞어서 넣을 수 있습니다.

abstract class Animal {
  // 1. 공통 기능 (구현 완료): 자식들이 그대로 사용
  breath() {
    console.log("숨을 쉽니다. 💨");
  }

  // 2. 추상 메서드 (뼈대만): 자식이 "반드시" 직접 구현해야 함
  abstract makeSound(): void;
}

class Dog extends Animal {
  // abstract 메서드를 구현 안 하면 에러 발생!
  makeSound() {
    console.log("멍멍! 🐶");
  }
}

const myDog = new Dog();
myDog.breath();    // "숨을 쉽니다." (부모꺼 사용)
myDog.makeSound(); // "멍멍!" (본인이 구현한 것 사용)
// const animal = new Animal(); // ❌ 에러! 추상 클래스는 직접 객체 생성 불가

5.4.2 인터페이스 구현(implements)과의 역할 차이

6.1. 유니언 타입 (Union, |) 🔀

• "A 또는 B"라는 뜻입니다. 여러 타입 중 하나일 수 있을 때 사용합니다.
• API 응답이나 상태값을 처리할 때 주로 활용됩니다.

// string이거나 number일 수 있음
let id: string | number;

id = "user_01"; // ✅ OK
id = 123;       // ✅ OK

// 실무 예시: 로딩 상태 처리
type Status = "success" | "error" | "loading";

function printStatus(status: Status) {
  console.log(`현재 상태는 ${status}입니다.`);
}

printStatus("success"); // ✅ OK
// printStatus("pending"); // ❌ 에러! (정해진 문자열 외에는 거부)

6.2. 인터섹션 타입 (Intersection, &) 🤝

• "A 그리고 B"라는 뜻입니다. 여러 타입을 하나로 합쳐서 모든 속성을 다 가지게 만듭니다.
• 유저 정보와 권한 정보를 합칠 때 매우 유용합니다.

interface Person {
  name: string;
}

interface Worker {
  employeeId: number;
}

// Person과 Worker의 모든 속성을 가져야 함
type Employee = Person & Worker;

const newEmployee: Employee = {
  name: "박대리",
  employeeId: 9901
};

6.3. 타입 추론과 단언 🔍

6.3.1. 타입 추론 (Type Inference) ✨

• 변수를 선언하고 바로 값을 할당하면 타입스크립트가 그 값을 보고 타입을 자동으로 정합니다.
• 명확한 경우에는 추론에 맡기는 것이 코드가 깔끔합니다.

let name = "철수"; // string으로 자동 추론
let age = 25;      // number로 자동 추론

// name = 123;     // ❌ 에러! 이미 string으로 추론됐기 때문

6.3.2. 타입 단언 (Type Assertion, as) 🛠️

• 개발자가 해당 타입에 대해 더 확실히 알고 있을 때 사용합니다.
• 키워드: as (가장 권장되는 방식)
• ⚠️ 실제로 타입이 다르면 런타임에 에러가 발생할 수 있으니 주의해야 합니다.

6.3.2.1. 단언으로 구체적인 태그 지정하기 🏷️

document.querySelector는 기본적으로 Element라는 넓은 범위를 반환합니다. 특정 태그의 속성(예: input의 value, img의 src)을 쓰려면 as로 타입을 좁혀야 합니다.

// TS는 이게 그냥 Element인줄 알지만, 개발자는 input 태그인 걸 압니다.
const myInput = document.getElementById("user-id") as HTMLInputElement;

// 단언 덕분에 value 속성에 접근 가능해짐
console.log(myInput.value); 

6.3.2.2. null 체크 패턴 (안전한 접근) 🛡️

요소가 화면에 없을 경우를 대비해야 합니다. 실무에서는 Optional Chaining(?.)이나 조건문을 필수로 사용합니다.

const button = document.querySelector('.submit-btn') as HTMLButtonElement;

// 패턴 A: Optional Chaining (권장)
button?.click(); 

// 패턴 B: 조건문 (복잡한 로직일 때)
if (button) {
  button.disabled = true;
  button.innerText = "전송 중...";
}

6.3.2.3. 이벤트 리스너의 e.target 처리 🎯

이벤트 함수 안에서 e.target을 쓸 때도 타입 단언이 필요합니다. target은 어떤 요소일지 TS가 확신할 수 없기 때문입니다.

const handleInput = (e: Event) => {
  // e.target을 필요한 타입으로 단언하여 사용
  const target = e.target as HTMLInputElement;
  console.log(target.value);
};

document.querySelector('#search')?.addEventListener('input', handleInput);

6.3.2.4. 자주 쓰이는 HTML 타입 목록 📋

• HTMLInputElement (input)
• HTMLButtonElement (button)
• HTMLAnchorElement (a 태그)
• HTMLImageElement (img 태그)
• HTMLFormElement (form 태그)

6.4. 타입 가드 (Type Guards) 👮‍♂️

타입 가드는 말 그대로 "타입을 지키는 파수꾼"입니다. 유니언 타입처럼 여러 타입이 섞여 있을 때, 런타임에서 타입을 하나로 확정 지어 안전하게 코드를 짤 수 있게 해줍니다.

6.4.1. typeof: 원시 타입 분기 📝

가장 기본적인 방법으로 string, number, boolean 같은 기본 타입을 구별할 때 씁니다.

function printId(id: string | number) {
  if (typeof id === "string") {
    // 이 안에서 id는 100% string입니다.
    console.log(id.toUpperCase());
  } else {
    // 여기서는 자동으로 number가 됩니다.
    console.log(id.toFixed(2));
  }
}

6.4.2. instanceof: 클래스 객체 분기 🏗️

어떤 객체가 특정 클래스로부터 만들어졌는지 확인할 때 씁니다.

class Dog { bark() { console.log("멍멍"); } }
class Cat { meow() { console.log("야옹"); } }

function speak(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // Dog 타입으로 확정
  } else {
    animal.meow(); // Cat 타입으로 확정
  }
}

6.4.3. 사용자 정의 타입 가드 (is 키워드) 👤

복잡한 객체의 타입을 판별하는 별도의 함수를 만들 때 사용하며, 반환 타입에 인자 is 타입을 적어주는 것이 핵심입니다.

interface User { name: string; role: string; }
interface Guest { name: string; }

// "person이 User 타입인지 확인하는 함수" 정의
function isUser(person: User | Guest): person is User {
  return (person as User).role !== undefined;
}

function welcome(person: User | Guest) {
  if (isUser(person)) {
    // 이 블록 안에서 person은 User 타입으로 대접받습니다.
    console.log(`관리자 ${person.name}님 환영합니다.`);
  } else {
    console.log(`방문자 ${person.name}님 환영합니다.`);
  }
}

// 실전 예시 호출
const admin = { name: "강팀장", role: "ADMIN" };
const guest = { name: "익명" };

welcome(admin); // 출력: "관리자 강팀장님 환영합니다."
welcome(guest); // 출력: "방문자 익명님 환영합니다."

// 배열을 활용한 반복 처리
const people: (User | Guest)[] = [
  { name: "이대리", role: "EDITOR" },
  { name: "길동" }
];

people.forEach(p => welcome(p));

7.1. 제네릭의 개념 💡

제네릭(Generics)은 한마디로 타입을 변수처럼 사용하는 '타입 파라미터' 개념입니다. 함수나 클래스를 만들 때 타입을 미리 정하지 않고, 사용하는 시점에 타입을 넘겨주어 재사용성을 극대화하는 것이 핵심입니다.

7.1.1. 제네릭이 왜 필요한가요? 🤔

• [방법 1] 타입별로 함수를 다 만든다 (비효율) 😭 typescript function echoNumber(item: number): number { return item; } function echoString(item: string): string { return item; } // 타입이 늘어날 때마다 함수를 계속 복사해야 함...
• [방법 2] any 타입을 쓴다 (위험) ❌ typescript function echoAny(item: any): any { return item; } const result = echoAny(123); // result의 타입이 any가 되어버림. 숫자인지 문자열인지 추적이 안 됨

• [방법 3] 제네릭을 쓴다 ✅ ```typescript // 는 "어떤 타입이든 들어올 수 있는 빈 공간"이라는 뜻 function echo(item: T): T { return item; }

  const r1 = echo(100); // T는 number가 됨 const r2 = echo("Hi"); // T는 string이 됨 ```

7.1.2. 활용 : API 응답 처리 🌐

interface Response<T> {
  data: T;           // 실제 데이터의 타입은 그때그때 다름!
  status: number;
  message: string;
}

// 유저 데이터를 받을 때
const userRes: Response<{ name: string }> = {
  data: { name: "철수" },
  status: 200,
  message: "성공"
};

// 상품 목록을 받을 때
const itemRes: Response<string[]> = {
  data: ["사과", "바나나"],
  status: 200,
  message: "성공"
};

7.2. 제네릭 함수와 인터페이스 🛠️

7.2.1. 제네릭 함수 (Generic Functions) ⚙️

함수 이름 뒤에 <T>를 붙여 사용합니다. 여기서 T는 관습적으로 사용하는 이름일 뿐입니다.

// 괄호 앞 <T>는 이 함수에서 T라는 타입 변수를 쓰겠다는 선언입니다.
function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

// 사용 시점에 타입을 명시하거나, TS가 추론하게 둡니다.
const str = getFirstElement<string>(["A", "B"]); // T는 string
const num = getFirstElement([1, 2, 3]);           // T는 number (자동 추론)

7.2.2. 제네릭 인터페이스 (Generic Interfaces) 템플릿 📑

인터페이스 이름 뒤에 <T>를 붙입니다. 데이터 구조는 같은데 내부 값의 타입만 바뀔 때 유용합니다.

// 어떤 형태의 데이터(T)든 담을 수 있는 박스 설계도
interface Box<T> {
  label: string;
  content: T;
}

const stringBox: Box<string> = { label: "편지", content: "안녕하세요!" };
const numberBox: Box<number> = { label: "나이", content: 25 };

7.2.3. HTTP 응답 처리 예제 📡

interface ApiResponse<T> {
  success: boolean;
  data: T;          // 여기에 어떤 데이터가 올지 제네릭으로 결정!
  error?: string;
}

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

function fetchUser(): ApiResponse<User> {
  return { success: true, data: { id: 1, name: "철수" } };
}

const response = fetchUser();
console.log(response.data.name); // 'User' 타입임을 알기에 자동완성 가능!

7.2.4. 여러 개의 제네릭 변수 사용 (<T, U, K>) 🖇️

서로 다른 타입을 결합하거나 관계를 맺어줄 때 사용합니다.

function merge<T, U>(objA: T, objB: U): T & U {
  return { ...objA, ...objB };
}

const combined = merge({ name: '철수' }, { age: 25 });
console.log(combined.name); // OK
console.log(combined.age);  // OK

7.2.5. 왜 T, U 인가요? 📝

보통 관습적으로 아래 이름을 사용합니다. - T: Type (첫 번째) - U: Usually (T 다음 문자) - K: Key - V: Value - E: Element

7.3. 제네릭 제약 조건 (Constraints) ⚓

7.3.1. 왜 제약 조건이 필요한가? (문제 상황) ⚠️

단순히 <T>만 쓰면 TS는 어떤 속성이 들어올지 몰라 에러를 냅니다.

function printLength<T>(item: T) {
  // ❌ 에러: 'T' 형식에 'length' 속성이 없습니다.
  console.log(item.length); 
}

7.3.2. extends로 해결하기 🤝

"T는 적어도 특정 속성을 가진 타입이어야 해"라고 계약서를 쓰는 것입니다.

interface LengthWise { length: number; }

// T는 반드시 LengthWise 인터페이스를 만족해야 함
function printLength<T extends LengthWise>(item: T): void {
  console.log(`길이: ${item.length}`); // ✅ 이제 안심하고 사용 가능!
}

printLength("Hello");   // ✅ OK
printLength([1, 2, 3]); // ✅ OK
// printLength(123);    // ❌ 에러! (숫자는 length가 없음)

7.3.3. 특정 속성 추출 (keyof) 🔑

"K는 반드시 T의 키(Key) 중 하나여야 한다"는 제약입니다.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const person = { name: "철수", age: 25 };

getProperty(person, "name"); // ✅ OK
// getProperty(person, "hobby"); // ❌ 에러! (객체에 hobby 키가 없음)

유틸리티 타입(Utility Types)은 이미 정의해둔 타입을 상황에 맞게 변형해서 쓰고 싶을 때 사용하는 '타입 전용 도구'입니다.

8.1. 주요 유틸리티 타입 🧰

8.1.1. Partial<T> : 모든 속성을 선택 사항으로! ❓

기존 타입에서 원하는 속성만 골라서 새로운 타입을 만듭니다. Partial<User>가 붙은 곳에는 속성 중 일부만 골라서 넣을 수 있습니다.

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

function updateUser(id: number, fieldsToUpdate: Partial<User>) {
  // 실제 업데이트 로직...
}

updateUser(1, { name: "새이름" }); // ✅ age나 id가 없어도 에러 안 남!

8.1.2. Pick<T, K> : 필요한 것만 쏙쏙! 📍

기존 타입에서 원하는 속성만 골라서 새로운 타입을 만듭니다.

// User에서 'name'과 'age'만 골라서 쓰고 싶을 때
type UserPreview = Pick<User, "name" | "age">;

const profile: UserPreview = {
  name: "철수",
  age: 20
};
// profile.id; // ❌ 에러! Pick으로 가져오지 않음

8.1.3. Omit<T, K> : 특정 것만 빼고 전부! ✂️

기존 타입에서 특정 속성만 제거하고 나머지를 사용합니다.

// User에서 'id'만 빼고 나머지는 다 쓰고 싶을 때
type NewUser = Omit<User, "id">;

const newUser: NewUser = {
  name: "영희",
  age: 27
  // id 속성은 넣으면 오히려 에러남!
};

8.1.4. Readonly<T> : 읽기 전용으로! 🔒

모든 속성을 수정 불가능하게 만듭니다.

const frozenUser: Readonly<User> = { id: 1, name: "철수", age: 20 };
// frozenUser.name = "길동"; // ❌ 에러! 읽기 전용임

8.1.5. Record<K, T> : 키-값 형태의 객체 타입 매핑 🗺️

"특정 키(K)들을 모아서 값(T)의 타입을 고정하고 싶을 때" 사용하며, 객체의 '지도(Map)'나 '사전'을 만들 때 유용합니다.

8.1.5.1. 기본 문법 📝

// Record<키_타입, 값_타입>
const scores: Record<string, number> = {
  "math": 100,
  "english": 90,
};

8.1.5.2. 실무 예제: 정해진 카테고리 관리 🗂️

특정 문자열 집합을 키로 고정할 때 진짜 위력을 발휘합니다.

type Page = "home" | "about" | "contact";

interface PageInfo {
  title: string;
}

// "home", "about", "contact" 외의 키는 허용하지 않음!
const nav: Record<Page, PageInfo> = {
  home: { title: "홈" },
  about: { title: "소개" },
  contact: { title: "연락처" },
};

// nav.blog = { title: "블로그" }; // ❌ 에러! Page 타입에 'blog'가 없음

8.1.5.3. Record와 다른 유틸리티 조합 🤝

객체의 규격을 딱 정해버리는 도구로 활용됩니다.

// 유저들의 ID(number)를 키로 하고, 유저 정보(User)를 값으로 하는 객체
const userList: Record<number, User> = {
  101: { id: 101, name: "철수", age: 20 },
  102: { id: 102, name: "영희", age: 25 },
};

8.2. 모듈 시스템 📦

타입스크립트의 모듈 시스템은 코드를 여러 파일로 나누고 공유할 수 있게 해주는 '부품 관리 시스템'입니다.

8.2.1. 내보내기 (Export) 📤

다른 파일에서 쓸 수 있도록 이름표를 붙여주는 단계입니다. - 이름 붙여 내보내기 (Named Export): 한 파일에서 여러 개를 내보낼 때 - 기본 내보내기 (Default Export): 한 파일의 '대표'를 하나만 내보낼 때

// math.ts
export const PI = 3.14; // Named Export

export default function add(a: number, b: number) { // Default Export
  return a + b;
}

8.2.2. 가져오기 (Import) 📥

다른 파일에 있는 부품을 가져오는 단계입니다.

// app.ts
import add, { PI } from './math'; // Default는 중괄호 없이, Named는 중괄호 안에!

console.log(add(1, 2)); // 3
console.log(PI);        // 3.14

8.2.3. 타입 전용 모듈 (Import Type) 🏗️

실행 데이터가 아닌 '설계도(타입)'만 가져올 때 사용합니다.

// types.ts
export interface User { id: number; name: string; }

// main.ts
import type { User } from './types'; // "나는 타입만 쓸 거야"라고 명시

const user: User = { id: 1, name: "철수" };

tsconfig.json은 타입스크립트의 컴파일 환경을 설정하는 핵심 파일입니다. 실무에서 가장 자주 조정하는 5가지 핵심 옵션은 다음과 같습니다.

9.1. 주요 컴파일 옵션

• target: 타입스크립트 코드를 어떤 버전의 자바스크립트로 변환할지 결정합니다. (예: ES6, ESNext)
• module: 모듈 시스템 방식을 결정합니다. (프론트엔드 최신 도구는 주로 ESNext, Node.js는 CommonJS)
• strict: 모든 타입 검사 옵션을 활성화합니다. 실무에서는 true 설정을 강력히 권장합니다.
• outDir: 컴파일된 결과물(.js)이 저장될 폴더를 지정합니다.
• paths: 프로젝트 내에서 절대 경로(예: @/components/...)를 사용할 수 있게 설정하여 코드 가독성을 높입니다.

9.2. 실무용 추천 설정 예시

{
  "compilerOptions": {
    "target": "ESNext",               // 최신 JS 버전으로 변환
    "module": "ESNext",               // 최신 모듈 시스템 사용
    "strict": true,                   // 엄격한 타입 검사 활성화 (필수)
    "outDir": "./dist",               // 빌드 결과물은 dist 폴더에 저장
    "rootDir": "./src",               // 소스 코드는 src 폴더에서 시작
    "baseUrl": ".",                   // 경로 해석의 기준점
    "paths": {
      "@/*": ["src/*"]                // @/ 기호로 src 폴더 접근 허용
    },
    "esModuleInterop": true,          // CommonJS 라이브러리 호환성 허용
    "skipLibCheck": true,             // 라이브러리 타입 검사 생략 (빌드 속도 향상)
    "forceConsistentCasingInFileNames": true // 파일 이름의 대소문자 구분 강제
  },
  "include": ["src/**/*"],            // src 폴더 내 모든 파일 포함
  "exclude": ["node_modules"]         // 검사에서 제외할 폴더
}

9.3. 요약

• 설계: target과 module로 결과물의 호환성을 정합니다.
• 안전: strict를 통해 런타임 에러를 방지합니다.
• 구조: rootDir, outDir, paths로 프로젝트 구조를 관리합니다.