{"id":488,"date":"2026-05-17T07:02:10","date_gmt":"2026-05-16T23:02:10","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-generics-6\/"},"modified":"2026-05-17T07:10:41","modified_gmt":"2026-05-16T23:10:41","slug":"ts-generics-6","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-generics-6\/","title":{"rendered":"\uc81c\ub124\ub9ad \uc785\ubb38 \u2014  \ud55c \uae00\uc790\uc758 \ud798 (\uae30\ucd08 6\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 270 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root{--color-primary:#3178c6;--color-accent:#60a5fa;--color-bg:#fafafa;--color-bg-card:#ffffff;--color-text:#1e293b;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#3178c6;--font-body:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;--size-body:17px;--line-height:1.75;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 22px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:72px 22px 56px;text-align:center;}\n.hero .badge{display:inline-block;background:rgba(96,165,250,0.18);color:var(--color-accent);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:0.5px;margin-bottom:18px;}\n.hero h1{margin:0 0 18px;font-size:36px;line-height:1.3;letter-spacing:-0.3px;}\n.hero p.sub{margin:0 auto;max-width:580px;font-size:17px;color:#dbeafe;}\n.hero img{width:100%;max-width:720px;height:auto;margin:36px auto 0;display:block;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.3);}\n.meta{display:flex;gap:14px;justify-content:center;margin-top:20px;font-size:13px;color:#93c5fd;flex-wrap:wrap;}\n.meta span::before{content:\"\u00b7\";margin-right:14px;color:#1e3a8a;}\n.meta span:first-child::before{content:\"\";margin:0;}\narticle{background:var(--color-bg-card);margin-top:-36px;padding:44px 28px;border-radius:14px;box-shadow:0 2px 18px rgba(0,0,0,0.06);}\narticle p{margin:0 0 18px;}\nh2{font-size:28px;line-height:1.35;letter-spacing:-0.3px;margin:48px 0 18px;padding-bottom:10px;border-bottom:2px solid var(--color-primary);}\nh2:first-of-type{margin-top:8px;}\nh3{font-size:21px;line-height:1.4;margin:30px 0 12px;color:var(--color-primary);}\ncode{background:#f1f5f9;color:#0f172a;padding:2px 6px;border-radius:4px;font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:0.92em;}\npre{background:#0f172a;color:#e2e8f0;padding:18px 20px;border-radius:10px;overflow-x:auto;font-size:14.5px;line-height:1.65;margin:18px 0;}\npre code{background:transparent;color:inherit;padding:0;}\nul,ol{margin:0 0 18px;padding-left:24px;}\nli{margin-bottom:8px;}\nstrong{color:#0f172a;}\n.databox{background:#eff6ff;border-left:4px solid var(--color-primary);padding:18px 20px;border-radius:6px;margin:22px 0;}\n.databox p{margin:0 0 8px;}\n.databox p:last-child{margin:0;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-left:4px solid #d97706;padding:18px 20px;border-radius:6px;margin:22px 0;}\n.warnbox strong{color:#92400e;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n.cta{background:linear-gradient(135deg,#3178c6 0%,#60a5fa 100%);color:#fff;padding:30px 24px;border-radius:12px;margin-top:44px;text-align:center;}\n.cta h3{color:#fff;margin:0 0 10px;}\n.cta p{margin:0;color:#dbeafe;}\n.series-nav{background:#eff6ff;padding:18px 22px;border-radius:10px;margin-top:24px;font-size:14.5px;color:var(--color-text-muted);}\n.series-nav strong{color:var(--color-primary);}\n@media (max-width:480px){.hero{padding:52px 18px 44px;}.hero h1{font-size:26px;}.hero p.sub{font-size:15px;}article{padding:28px 18px;border-radius:10px;}h2{font-size:22px;}h3{font-size:18px;}body{font-size:16px;}pre{font-size:13px;padding:14px 16px;}}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#eff6ff;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n<\/style>\n<header class=\"hero\">\n  <span class=\"badge\">\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac \u00b7 6\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\uc81c\ub124\ub9ad \uc785\ubb38 \u2014 &lt;T&gt; \ud55c \uae00\uc790\uc758 \ud798<\/h1>\n  <p class=\"sub\">\uc81c\ub124\ub9ad\uc740 &#8220;\ud0c0\uc785\uc744 \ubcc0\uc218\ucc98\ub7fc \ubc1b\ub294 \ud568\uc218&#8221;. \ub77c\uc774\ube0c\ub7ec\ub9ac \ucf54\ub4dc\uc758 80% \uac00 \uc5ec\uae30\uc11c \ub098\uc635\ub2c8\ub2e4.<\/p>\n  <div class=\"meta\"><span>\uae30\ucd08<\/span><span>\uc77d\ub294 \uc2dc\uac04 7\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-50.jpg\" alt=\"<T> \ud55c \uae00\uc790\uac00 \ub2e4\uc591\ud55c \ud0c0\uc785\uc73c\ub85c \ubcc0\ud658\ub418\ub294 \ubaa8\uc2b5\uc758 \ub3c4\uc2dd&#8221;>\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uc774 \ud55c \uc904\uc744 \ubcf8 \uc801 \uc788\ub098\uc694?<\/p>\n\n<pre><code>function identity&lt;T&gt;(value: T): T {\n  return value;\n}<\/code><\/pre>\n\n<p><code>&lt;T&gt;<\/code> \uac00 \ucc98\uc74c \ubcf4\uba74 \uc678\uacc4\uc5b4 \uac19\uc9c0\ub9cc, \uc54c\uace0 \ub098\uba74 &#8220;\uc65c \uc9c4\uc791 \uc548 \uc37c\uc9c0&#8221; \uc2f6\uc5b4\uc9d1\ub2c8\ub2e4. \uc81c\ub124\ub9ad\uc740 <strong>&#8220;\ud0c0\uc785\uc744 \ub9e4\uac1c\ubcc0\uc218\ucc98\ub7fc \ubc1b\ub294 \ud568\uc218\/\ud0c0\uc785&#8221;<\/strong> \uc774\uc5d0\uc694. 6\ud3b8\uc740 \uc81c\ub124\ub9ad\uc758 \uccab 90% \ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\uc65c \uc81c\ub124\ub9ad\uc774 \ud544\uc694\ud55c\uac00<\/h2>\n\n<pre><code>\/\/ \ub2e8\uc21c \ubc84\uc804 \u2014 any \uc0ac\uc6a9 (\ud0c0\uc785 \uc815\ubcf4 \uc0ac\ub77c\uc9d0)\nfunction first(arr: any[]): any {\n  return arr[0];\n}\nconst n = first([1, 2, 3]);   \/\/ n \uc758 \ud0c0\uc785: any  \u2190 \ub9dd\ud568\nn.toUpperCase();              \/\/ \ucef4\ud30c\uc77c \ud1b5\uacfc (\ub7f0\ud0c0\uc784 \uc5d0\ub7ec)\n\n\/\/ \uc81c\ub124\ub9ad \ubc84\uc804 \u2014 \ud0c0\uc785 \ubcf4\uc874\nfunction first&lt;T&gt;(arr: T[]): T {\n  return arr[0];\n}\nconst n2 = first([1, 2, 3]);            \/\/ n2: number\nconst s2 = first([\"a\", \"b\", \"c\"]);      \/\/ s2: string\nn2.toFixed(2);                          \/\/ OK\ns2.toUpperCase();                       \/\/ OK<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\ud575\uc2ec \ud55c \uc904.<\/strong> \uc81c\ub124\ub9ad\uc740 \ud568\uc218\uac00 &#8220;\uc5b4\ub5a4 \ud0c0\uc785\uc774\ub4e0 \ubc1b\uc9c0\ub9cc, <strong>\uc785\ub825\uacfc \ucd9c\ub825\uc758 \uad00\uacc4\ub97c \ubcf4\uc874<\/strong>&#8221; \ud558\uac8c \ud574\uc90d\ub2c8\ub2e4. any \ub294 \uad00\uacc4\ub97c \ub04a\uc9c0\ub9cc, \uc81c\ub124\ub9ad\uc740 \uc0b4\ub9bd\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<h2>\ud638\ucd9c\ud560 \ub54c \u2014 \ucd94\ub860\uc774 \uc54c\uc544\uc11c<\/h2>\n\n<pre><code>function box&lt;T&gt;(value: T): { value: T } {\n  return { value };\n}\n\n\/\/ \uba85\uc2dc \ud638\ucd9c (\ud544\uc694 \uc5c6\uc74c)\nbox&lt;string&gt;(\"hi\");\n\n\/\/ \ucd94\ub860\uc5d0 \ub9e1\uae40 (\uad8c\uc7a5)\nbox(\"hi\");       \/\/ T = string \ucd94\ub860\nbox(42);         \/\/ T = number \ucd94\ub860\nbox({a: 1});     \/\/ T = {a: number} \ucd94\ub860<\/code><\/pre>\n\n<p>\ub300\ubd80\ubd84 \ucd94\ub860\uc774 \uc54c\uc544\uc11c \ud569\ub2c8\ub2e4. \uba85\uc2dc \ud638\ucd9c\uc774 \ud544\uc694\ud55c \uacbd\uc6b0\ub294 \ube48 \ubc30\uc5f4\u00b7null \uac19\uc740 \ucd94\ub860 \ubd80\uc871 \ucf00\uc774\uc2a4, \ub610\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac API \uc124\uba85 \ub4f1 \uba85\ud655\uc131\uc744 \uc704\ud574\uc11c\uc785\ub2c8\ub2e4.<\/p>\n\n<h2>\uc5ec\ub7ec \uac1c\uc758 \ud0c0\uc785 \ub9e4\uac1c\ubcc0\uc218<\/h2>\n\n<pre><code>function pair&lt;K, V&gt;(key: K, value: V): [K, V] {\n  return [key, value];\n}\n\npair(\"name\", \"\uc900\uc131\");   \/\/ [string, string]\npair(\"age\", 39);        \/\/ [string, number]\npair(1, true);          \/\/ [number, boolean]<\/code><\/pre>\n\n<p>\uad00\ub840\uc801\uc73c\ub85c \ud55c \uae00\uc790 \u2014 T, U, V, K, V \u2014 \ub97c \uc501\ub2c8\ub2e4. \uc758\ubbf8\uac00 \uc788\uc73c\uba74 \ud480\uc5b4\uc368\ub3c4 \ub429\ub2c8\ub2e4 \u2014 <code>&lt;TKey, TValue&gt;<\/code>.<\/p>\n\n<h2>extends \uc81c\uc57d \u2014 &#8220;\uc774 \ud0c0\uc785 \uc911 \ud558\ub098\uc5ec\uc57c&#8221;<\/h2>\n\n<pre><code>\/\/ \uae38\uc774 \uc18d\uc131\uc774 \uc788\ub294 \uac83\ub9cc \ubc1b\uae30\nfunction logLength&lt;T extends { length: number }&gt;(value: T): T {\n  console.log(value.length);\n  return value;\n}\n\nlogLength(\"hello\");        \/\/ string \uc740 length \uc788\uc74c \u2192 OK\nlogLength([1, 2, 3]);      \/\/ \ubc30\uc5f4\ub3c4 length \uc788\uc74c \u2192 OK\nlogLength(42);             \/\/ \u274c number \ub294 length \uc5c6\uc74c\n\n\/\/ keyof \uc640 \ud568\uaed8\nfunction pick&lt;T, K extends keyof T&gt;(obj: T, key: K): T[K] {\n  return obj[key];\n}\nconst user = { name: \"\uc900\uc131\", age: 39 };\npick(user, \"name\");        \/\/ string\npick(user, \"age\");          \/\/ number\npick(user, \"phone\");       \/\/ \u274c phone \uc740 user \ud0a4 \uc544\ub2d8<\/code><\/pre>\n\n<p><code>extends<\/code> \ub294 &#8220;\ucd5c\uc18c\ud55c \uc774 \ubaa8\uc591\uc744 \uac00\uc838\uc57c&#8221; \ub77c\ub294 \uc81c\uc57d\uc785\ub2c8\ub2e4. JS \uc758 \ud074\ub798\uc2a4 \uc0c1\uc18d\uacfc \uae00\uc790\ub9cc \uac19\uace0 \uc758\ubbf8\ub294 \ub2e4\ub985\ub2c8\ub2e4.<\/p>\n\n<h2>\uae30\ubcf8\uac12 \u2014 T = \uae30\ubcf8 \ud0c0\uc785<\/h2>\n\n<pre><code>\/\/ React \uc758 useState \uc640 \ube44\uc2b7\ud55c \ud328\ud134\nfunction createState&lt;T = string&gt;(initial?: T): [T | undefined, (v: T) =&gt; void] {\n  let value = initial;\n  const set = (v: T) =&gt; { value = v; };\n  return [value, set];\n}\n\ncreateState&lt;number&gt;(0);   \/\/ T = number \uba85\uc2dc\ncreateState(\"hi\");        \/\/ T = string \ucd94\ub860\ncreateState();            \/\/ T = string \uae30\ubcf8\uac12 (initial \uc5c6\uc73c\ub2c8\uae4c \ucd94\ub860 \ubabb\ud568)<\/code><\/pre>\n\n<h2>\uc81c\ub124\ub9ad \uc778\ud130\ud398\uc774\uc2a4\u00b7\ud0c0\uc785<\/h2>\n\n<pre><code>\/\/ API \uc751\ub2f5 \ub798\ud37c\ninterface ApiResponse&lt;T&gt; {\n  ok: boolean;\n  data: T;\n  error?: string;\n}\n\n\/\/ \uc0ac\uc6a9\ntype UserResp = ApiResponse&lt;{ id: number; name: string }&gt;;\ntype PostsResp = ApiResponse&lt;Array&lt;{ id: number; title: string }&gt;&gt;;\n\n\/\/ \ud074\ub798\uc2a4\uc5d0\ub3c4\nclass Box&lt;T&gt; {\n  constructor(public value: T) {}\n  get(): T { return this.value; }\n}\nconst stringBox = new Box(\"hi\");      \/\/ Box&lt;string&gt; \ucd94\ub860\nconst numBox    = new Box&lt;number&gt;(0);<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\ud754\ud55c \ud568\uc815 \u2014 \ud654\uc0b4\ud45c \ud568\uc218\uc758 &lt;T&gt;.<\/strong> JSX\/TSX \ud30c\uc77c\uc5d0\uc11c <code>const f = &lt;T&gt;(x: T) =&gt; x<\/code> \ub294 JSX \ud0dc\uadf8\ub85c \uc624\ud574\ub429\ub2c8\ub2e4. <strong>\uc27c\ud45c<\/strong>\ub85c \ud574\uacb0 \u2014 <code>&lt;T,&gt;(x: T) =&gt; x<\/code>, \ub610\ub294 <code>extends<\/code> \uc0ac\uc6a9 \u2014 <code>&lt;T extends unknown&gt;(x: T) =&gt; x<\/code>. \uc77c\ubc18 .ts \ud30c\uc77c\uc5d0\uc11c\ub294 \ubb38\uc81c \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<h2>\uc81c\ub124\ub9ad \uc791\uc131\uc758 3\uac00\uc9c0 \uc6d0\uce59<\/h2>\n\n<ol>\n  <li><strong>\ud0c0\uc785 \ub9e4\uac1c\ubcc0\uc218\ub294 \ucd5c\uc18c\ud55c\uc73c\ub85c<\/strong>. \uc548 \uc4f0\uba74 \uc758\ubbf8 \uc5c6\ub294 \uc7a1\uc74c.<\/li>\n  <li><strong>\uc785\ub825\uacfc \ucd9c\ub825\uc5d0 \ubaa8\ub450 \ub4f1\uc7a5<\/strong>\ud574\uc57c \uac00\uce58\uac00 \uc0dd\uae34\ub2e4. \ud55c\ucabd\uc5d0\ub9cc \uc4f0\ub294 T \ub294 \ubcf4\ud1b5 any \ub85c \ub300\uccb4 \uac00\ub2a5 \u2014 \ub2e4\uc2dc \uc0dd\uac01.<\/li>\n  <li><strong>\uc81c\uc57d\uc744 \uc801\uc808\ud788<\/strong>. \ub108\ubb34 \ub113\uc73c\uba74 \ubcf8\ubb38\uc5d0\uc11c \uc4f8 \uc218 \uc788\ub294 \uac8c \uc5c6\uace0, \ub108\ubb34 \uc881\uc73c\uba74 \ud638\ucd9c\uc790\uac00 \ub2f5\ub2f5\ud558\ub2e4.<\/li>\n<\/ol>\n\n<div class=\"cta\">\n  <h3>7\ud3b8 \u2014 enum \uacfc const enum<\/h3>\n  <p>\uc0c1\ud0dc \ucf54\ub4dc\u00b7\ud14c\ub9c8 \uac19\uc740 \ubd84\ub958\uac12\uc5d0 enum \uc744 \uc4f8\uc9c0, union literal \uc744 \uc4f8\uc9c0\uc758 \uacb0\uc815.<\/p>\n<\/div>\n\n<div class=\"series-nav\">\n  <strong>\ud83d\udcda \uc27d\uac8c \ubc30\uc6b0\ub294 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac<\/strong><br>\n  \uc774\uc804: 5\ud3b8 \uc720\ub2c8\uc628\u00b7\uc778\ud130\uc139\uc158 \u00b7 \ud604\uc7ac: <strong>6\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 7\ud3b8 enum \u00b7 \uc9c4\ud589: <strong>6\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc81c\ub124\ub9ad \ud568\uc218\u00b7extends \uc81c\uc57d\u00b7\uae30\ubcf8\uac12\u00b7\uc778\ud130\ud398\uc774\uc2a4. 20\ud3b8 \uad50\uc7ac 6\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":270,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-basic"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=488"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/488\/revisions"}],"predecessor-version":[{"id":526,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/488\/revisions\/526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/270"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}