// 언제든 터질 수 있는 시한폭탄
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 6개월 후, 누군가가 이렇게 호출함
calculateTotal(null); // 💥 Cannot read property 'reduce' of null

// 혹은 더 미묘하게
calculateTotal([
  { price: 100 },
  { price: "200" }  // 문자열!
]); // 100200 (???)

// 2011년의 전형적인 대규모 JS 프로젝트
var userService = {
  currentUser: null,
  
  loadUser: function(id) {
    // 1000줄짜리 함수...
    ajax.get('/api/users/' + id, function(data) {
      this.currentUser = data;  // 어? 'this'가 뭐지?
    });
  },
  
  getUserName: function() {
    // currentUser가 null이면? 아무도 모름
    return this.currentUser.name;  // 💥
  }
};

// 6개월 후, 다른 개발자가
userService.loadUser("123");  // 문자열을 넘겨도 컴파일 타임에는 알 수 없음

// Microsoft의 실제 상황 (2010년경)
// Office Web Apps 코드베이스: 수십만 줄

function formatDocument(doc, options) {
  // 이 함수는 뭘 받고 뭘 리턴하나?
  // 1000줄 아래에서 사용할 때 아무도 기억 못함
  
  // options에 어떤 속성이 있어야 하나?
  if (options.format === 'pdf') {
    // ...
  }
  
  // doc 객체는 어떤 메서드를 가지고 있나?
  doc.save();  // 이게 존재하긴 하나?
}

// 이것은 유효한 자바스크립트
function add(a, b) {
  return a + b;
}

// 그리고 이것도 유효한 타입스크립트
// .js를 .ts로 바꾸기만 하면 됨!

// 1단계: 기존 자바스크립트 그대로
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 2단계: 매개변수에만 타입 추가
function calculateTotal(items: any[]) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 3단계: 구체적인 타입 정의
interface Item {
  price: number;
  name: string;
}

function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 4단계: 완전한 타입 안전성
function calculateTotal(items: readonly Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 이제 이런 실수는 컴파일 타임에 잡힘!
calculateTotal(null);  // ❌ 컴파일 오류
calculateTotal([{ price: "200" }]);  // ❌ 컴파일 오류

// Java나 C#의 명목적(Nominal) 타입 시스템이었다면
class Person {
  name: string;
  age: number;
}

class Employee {
  name: string;
  age: number;
}

// 이것은 오류가 됨 (다른 클래스)
let person: Person = new Employee();  // ❌ in Java/C#

// 하지만 TypeScript는 구조가 같으면 호환됨
let person: Person = new Employee();  // ✅ TypeScript에서는 OK!

// 더 나아가, 명시적 클래스 없이도 작동
interface Person {
  name: string;
  age: number;
}

// 이것도 Person 타입으로 인정됨
const person = { name: "김철수", age: 30 };
function greet(p: Person) {
  console.log(`안녕하세요, ${p.name}님`);
}
greet(person);  // ✅ 완벽하게 작동

// 타입을 명시하지 않아도 자동으로 추론됨
let message = "안녕하세요";  // string으로 추론
let count = 42;  // number로 추론
let items = [1, 2, 3];  // number[]로 추론

// 함수 리턴 타입도 추론
function add(a: number, b: number) {
  return a + b;  // number를 리턴한다고 자동 추론
}

// 복잡한 제네릭도 추론
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);  // number[]로 추론

// 심지어 조건부 타입도 추론
function process<T>(value: T) {
  if (typeof value === "string") {
    // 이 블록 안에서는 value가 string으로 좁혀짐
    return value.toUpperCase();
  }
  return value;
}

// Angular 2의 타입스크립트 활용
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  `
})
export class UserComponent {
  user: User = {
    name: '김철수',
    email: 'kim@example.com'
  };
  
  updateUser(newUser: User): void {
    this.user = newUser;
    // 타입 안전성 보장!
  }
}

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

// Vue 3의 타입스크립트 지원
import { defineComponent, ref, computed } from 'vue';

interface Todo {
  id: number;
  text: string;
  done: boolean;
}

export default defineComponent({
  setup() {
    const todos = ref<Todo[]>([]);
    
    const completedCount = computed(() => {
      return todos.value.filter(t => t.done).length;
    });
    
    const addTodo = (text: string): void => {
      todos.value.push({
        id: Date.now(),
        text,
        done: false
      });
    };
    
    // 완벽한 타입 추론과 자동완성!
    return { todos, completedCount, addTodo };
  }
});

// Dart 같은 경쟁자들의 접근
// → 새로운 언어 = 새로운 학습 곡선 = 채택 장벽

// TypeScript의 접근
// → 자바스크립트 개발자라면 이미 80%는 아는 상태
// → 나머지 20%만 배우면 됨

// TypeScript 코드
interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return `안녕하세요, ${user.name}님!`;
}

// 컴파일 후 JavaScript 코드
function greet(user) {
  return `안녕하세요, ${user.name}님!`;
}
// 타입 정보는 완전히 사라짐!

// 명시적 타입 없이도 완벽한 타입 추론
const numbers = [1, 2, 3, 4, 5];

// map의 매개변수 n은 자동으로 number로 추론
const doubled = numbers.map(n => n * 2);

// filter 후에는 배열 타입이 좁혀짐
const evenNumbers = numbers.filter(n => n % 2 === 0);

// 체이닝도 완벽하게 추론
const result = numbers
  .filter(n => n > 2)     // number[]
  .map(n => n * 2)        // number[]
  .reduce((a, b) => a + b, 0);  // number

// 자바스크립트의 동적 특성을 표현하는 고급 타입들

// 1. Union Types: 여러 타입 중 하나
type Status = "loading" | "success" | "error";

// 2. Conditional Types: 조건부 타입
type NonNullable<T> = T extends null | undefined ? never : T;

// 3. Mapped Types: 타입 변환
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 4. Template Literal Types: 문자열 패턴
type EventName = `on${Capitalize<string>}`;  // "onClick", "onHover" 등

// 수백 개 파일로 나뉜 대규모 프로젝트도 안전

// src/types/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

// src/services/userService.ts
import { User } from '../types/user';

export class UserService {
  async getUser(id: string): Promise<User> {
    // 구현...
  }
  
  async updateUser(user: User): Promise<void> {
    // User 타입이 변경되면 여기도 자동으로 체크됨
  }
}

// src/components/UserProfile.tsx
import { User } from '../types/user';
import { UserService } from '../services/userService';

function UserProfile({ userId }: { userId: string }) {
  // 타입 안전성이 전체 애플리케이션을 관통함
  const [user, setUser] = useState<User | null>(null);
  
  // User 인터페이스를 변경하면
  // 이 파일이 1000개 파일 밖에 있어도 오류를 즉시 발견
}

// 2015년: 타입 정의를 별도로 설치
npm install lodash
npm install @types/lodash

// 2024년: 대부분의 라이브러리가 타입 포함
npm install zod  // 타입이 내장됨

// TypeScript 5.0+의 최신 기능들

// 1. const 타입 매개변수
function makeTuple<const T>(arg: T) {
  return [arg] as const;
}
const tuple = makeTuple("hello");  // readonly ["hello"]

// 2. Decorators (Stage 3)
function log(target: any, key: string) {
  console.log(`${key} was called`);
}

class Service {
  @log
  getData() {
    return "data";
  }
}

// 3. 향상된 타입 추론
const config = {
  host: "localhost",
  port: 3000,
} as const;
// config.port는 3000 타입 (number가 아니라!)

// 10년 전, 이런 코드는 유지보수 악몽이었음
function processData(data) {
  return data.items
    .filter(item => item.active)
    .map(item => item.value)
    .reduce((sum, val) => sum + val, 0);
}

// 지금은 안전하고 명확함
interface Item {
  active: boolean;
  value: number;
  name: string;
}

interface Data {
  items: Item[];
}

function processData(data: Data): number {
  return data.items
    .filter(item => item.active)
    .map(item => item.value)
    .reduce((sum, val) => sum + val, 0);
}
// IDE가 모든 단계를 이해하고 도와줌
// 실수하면 즉시 알려줌
// 리팩토링도 안전함