맵드 타입 & 조건부 타입 해부

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
<div style='color:#10b981; margin-bottom:12px;'>MAPPED & CONDITIONAL TYPES</div>
<script>
  // Mapped Type 시뮬레이션
  // type Optional<T> = { [K in keyof T]?: T[K] }
  function makeOptional(obj) { return { ...obj }; }  // 모든 속성 선택적

  // type Stringify<T> = { [K in keyof T]: string }
  function stringifyAll(obj) { return Object.fromEntries(Object.entries(obj).map(([k,v]) => [k, String(v)])); }

  // 조건부 타입 시뮬레이션
  // type IsArray<T> = T extends any[] ? true : false
  function isArrayType(val) { return Array.isArray(val) ? 'true (배열)' : 'false (비배열)'; }

  const unit = { model: 'T-800', threat: 8, active: true };

  const results = [
    { type: 'Mapped Optional', result: JSON.stringify(makeOptional(unit)) },
    { type: 'Mapped Stringify', result: JSON.stringify(stringifyAll(unit)) },
    { type: 'IsArray<string[]>', result: isArrayType(['a','b']) },
    { type: 'IsArray<string>', result: isArrayType('T-800') },
  ];

  results.forEach(r => {
    const el = document.createElement('div');
    el.style.marginBottom = '8px'; el.style.fontSize = '11px';
    el.innerHTML = `<div style="color:#f59e0b;">${r.type}</div><div style="color:#888; font-size:10px; word-break:break-all;">${r.result}</div>`;
    document.currentScript.parentElement.appendChild(el);
  });
</script>
</div>