타입 단언(Type Assertion) — as와 non-null assertion

// DOM 요소 가져올 때 가장 많이 사용
const input = document.getElementById('username');
// input: HTMLElement | null

// as로 더 구체적인 타입을 단언
const inputEl = document.getElementById('username') as HTMLInputElement;
inputEl.value = '홍길동'; // OK — HTMLInputElement의 속성에 접근 가능

// 앵글 브래킷 문법 — JSX 파일(.tsx)에서는 사용 불가
const inputEl = <HTMLInputElement>document.getElementById('username');

// TSX에서는 반드시 as를 사용
const inputEl2 = document.getElementById('username') as HTMLInputElement;

// ❌ string을 number로 단언 불가
// const value = 'hello' as number; // Error

// 두 타입 사이에 충분한 관련성이 있어야 단언 가능
const value = 'hello' as string;       // OK (동일 타입)
const elem = document.createElement('div') as HTMLDivElement; // OK (상속 관계)

// ⚠️ 이중 단언 — 권장하지 않지만 가끔 필요
const value = 'hello' as unknown as number;

// 실전 예시: 테스트에서 mock 객체 만들 때
interface ComplexService {
  fetchData(): Promise<string[]>;
  processData(data: string[]): void;
  cleanup(): void;
}

// 모든 메서드를 구현하기 귀찮을 때 (테스트에서만!)
const mockService = {
  fetchData: jest.fn(),
} as unknown as ComplexService;

// element는 HTMLElement | null
const element = document.getElementById('app');

// ❌ null일 수 있으므로 에러
// element.textContent = 'hello'; // Error

// ✅ non-null assertion — "null이 아님을 보장한다"
element!.textContent = 'hello'; // OK

// ⚠️ 하지만 런타임에 null이면 에러 발생!

// 방법 1: if 체크
const element = document.getElementById('app');
if (element) {
  element.textContent = 'hello'; // OK — null이 제거됨
}

// 방법 2: 옵셔널 체이닝
element?.textContent; // null이면 undefined 반환

// 방법 3: nullish coalescing과 조합
const text = element?.textContent ?? '기본값';

// as const — 값을 읽기 전용 리터럴로 좁히기
const config = {
  method: 'GET' as const,  // 'GET' 리터럴 타입
  retries: 3 as const,     // 3 리터럴 타입
};

// 객체 전체에 적용
const fullConfig = {
  method: 'GET',
  retries: 3,
} as const;
// { readonly method: 'GET'; readonly retries: 3 }

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

// 타입 선언 — 초과 속성 검사가 동작
// const user: User = { name: '홍길동', age: 25, email: 'test' }; // ❌ Error

// 타입 단언 — 초과 속성 검사를 우회
const user = { name: '홍길동', age: 25, email: 'test' } as User; // OK ⚠️

// 타입 단언 — 필수 속성이 빠져도 에러 안 남
const partial = {} as User; // OK ⚠️ — name, age가 없는데 에러 없음

type ColorMap = Record<string, string | number[]>;

// as — 타입을 강제로 바꿈 (추론 정보 손실)
const colors1 = {
  red: '#ff0000',
  green: [0, 255, 0],
} as ColorMap;
// colors1.red: string | number[] — 어떤 것인지 모름

// satisfies — 타입을 검증하되 추론은 유지
const colors2 = {
  red: '#ff0000',
  green: [0, 255, 0],
} satisfies ColorMap;
// colors2.red: string — 구체적인 추론 유지
// colors2.green: number[] — 구체적인 추론 유지

// ✅ 적절한 사용
// 1. DOM 요소 타입 좁히기
const canvas = document.getElementById('canvas') as HTMLCanvasElement;

// 2. API 응답 타입 지정 (타입 가드와 함께)
const response = await fetch('/api/user');
const data = (await response.json()) as User;

// ❌ 피해야 할 사용
// 1. 타입 에러를 무시하기 위한 단언
const wrong = someValue as any; // 근본적인 타입 문제를 숨김

// 2. 빈 객체를 특정 타입으로 단언
const empty = {} as ComplexType; // 런타임에 속성 접근 시 에러