"TypeScript 기초 — JavaScript에 타입을 더하다"

## TypeScript란?

TypeScript는 JavaScript의 **슈퍼셋**으로, 정적 타입 검사를 추가한 언어다. `.ts` 파일은 컴파일 시 `.js`로 변환된다.

```
TypeScript (.ts)
      ↓ tsc (컴파일)
JavaScript (.js)
      ↓
브라우저 / Node.js
```

**왜 TypeScript인가?**
- 런타임 전에 타입 오류 발견
- IDE 자동완성 대폭 향상
- 코드 문서화 효과 (타입이 곧 스펙)
- 리팩토링 안전성 증가

---

## 기본 타입

```typescript
// 원시 타입
let name: string = "nullvuild";
let age: number = 30;
let active: boolean = true;

// 배열
let tags: string[] = ["docker", "ts"];
let nums: Array<number> = [1, 2, 3];

// 튜플 (고정 길이, 각 위치 타입 다름)
let pair: [string, number] = ["hello", 42];

// any (타입 검사 비활성화 — 가급적 지양)
let anything: any = "foo";

// unknown (any보다 안전 — 사용 전 타입 좁히기 필요)
let val: unknown = getData();
if (typeof val === "string") console.log(val.toUpperCase());

// never (절대 반환하지 않는 함수)
function fail(msg: string): never {
    throw new Error(msg);
}
```

---

## 인터페이스 vs 타입 별칭

```typescript
// Interface — 객체 형태 정의
interface User {
    id: number;
    handle: string;
    bio?: string;        // ? = 선택적 프로퍼티
    readonly createdAt: Date;  // readonly = 읽기 전용
}

// Type alias — 더 유연 (유니온, 교차 타입 등)
type ID = string | number;
type Status = "pending" | "done" | "blocked";

// 교차 타입 (intersection)
type Admin = User & { role: "admin" | "mod" };
```

**인터페이스 vs 타입**: 객체 형태는 둘 다 가능하지만, 유니온/튜플은 `type`, 클래스 구현(`implements`)은 `interface`.

---

## 함수 타입

```typescript
// 파라미터 + 반환 타입
function add(a: number, b: number): number {
    return a + b;
}

// 화살표 함수
const greet = (name: string): string => `Hello, ${name}`;

// 옵셔널 파라미터
function createNode(title: string, tags?: string[]): void {
    // ...
}

// 기본값
function paginate(page: number = 1, size: number = 20) {
    // ...
}

// 오버로드
function search(q: string): Node[];
function search(q: string, tag: string): Node[];
function search(q: string, tag?: string): Node[] {
    // 실제 구현
}
```

---

## 제네릭 (Generics)

타입을 **파라미터화**해서 재사용 가능한 컴포넌트를 만든다.

```typescript
// 제네릭 함수
function first<T>(arr: T[]): T | undefined {
    return arr[0];
}

const str = first(["a", "b"]);  // 타입: string | undefined
const num = first([1, 2, 3]);   // 타입: number | undefined

// 제네릭 인터페이스
interface ApiResponse<T> {
    status: "success" | "error";
    data: T;
    message?: string;
}

type UserResponse = ApiResponse<User>;
type NodeListResponse = ApiResponse<Node[]>;

// 제약 조건 (constraint)
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}
```

---

## 유틸리티 타입

```typescript
interface Node {
    id: number;
    title: string;
    content: string;
    tags: string[];
    createdAt: Date;
}

// Partial: 모든 프로퍼티를 선택적으로
type NodeUpdate = Partial<Node>;

// Required: 모든 프로퍼티를 필수로
type RequiredNode = Required<Node>;

// Pick: 일부 프로퍼티만 선택
type NodeSummary = Pick<Node, "id" | "title" | "tags">;

// Omit: 일부 프로퍼티 제외
type NodeWithoutContent = Omit<Node, "content">;

// Record: key-value 맵
type TagCount = Record<string, number>;

// Readonly: 모든 프로퍼티 읽기 전용
type FrozenNode = Readonly<Node>;
```

---

## 타입 가드

```typescript
// typeof 가드
function display(val: string | number) {
    if (typeof val === "string") {
        console.log(val.toUpperCase()); // string으로 좁혀짐
    } else {
        console.log(val.toFixed(2));    // number로 좁혀짐
    }
}

// instanceof 가드
if (err instanceof Error) {
    console.log(err.message);
}

// in 가드
interface Node { title: string; content: string; }
interface Flow { title: string; description: string; }

function render(item: Node | Flow) {
    if ("content" in item) {
        // Node
    } else {
        // Flow
    }
}

// 커스텀 타입 가드 (is)
function isNode(item: Node | Flow): item is Node {
    return "content" in item;
}
```

---

## tsconfig 핵심 옵션

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "strict": true,          // 엄격 모드 (권장)
    "noImplicitAny": true,   // any 암묵적 사용 금지
    "strictNullChecks": true,// null/undefined 명시 필요
    "outDir": "./dist",
    "rootDir": "./src",
    "paths": {
      "@/*": ["./src/*"]     // 경로 별칭
    }
  }
}
```

**`strict: true`** 를 항상 켜자. 초반엔 불편하지만 런타임 오류를 대폭 줄여준다.

---

## 정리

- **인터페이스/타입**: 객체 형태 명세 → 코드가 곧 문서
- **제네릭**: 타입 파라미터로 재사용성 극대화
- **유틸리티 타입**: `Partial`, `Pick`, `Omit`으로 타입 조합
- **타입 가드**: 런타임에서 타입 안전하게 좁히기
- `strict: true` + `noImplicitAny: true` 는 필수

"TypeScript 기초 — JavaScript에 타입을 더하다"

// COMMENTS

ON THIS PAGE