{"id":501,"date":"2026-05-17T07:03:34","date_gmt":"2026-05-16T23:03:34","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-conditional-types-12\/"},"modified":"2026-05-17T07:03:34","modified_gmt":"2026-05-16T23:03:34","slug":"ts-conditional-types-12","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-conditional-types-12\/","title":{"rendered":"\uc870\uac74\ubd80 \ud0c0\uc785 \u2014 T extends U ? X : Y (\uc911\uae09 12\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 289 -->\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 12\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\uc870\uac74\ubd80 \ud0c0\uc785 \u2014 T extends U ? X : Y<\/h1>\n  <p class=\"sub\">\ud0c0\uc785 \uc548\uc5d0 if \uac00 \uc788\ub294 \ub4ef\ud55c \uac15\ub825\ud55c \ub3c4\uad6c. infer \uc640 \ubd84\ubc30 \uc870\uac74\ubd80\uae4c\uc9c0.<\/p>\n  <div class=\"meta\"><span>\uc911\uae09<\/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-68.jpg\" alt=\"T extends U ? X : Y \uc870\uac74\ubd80 \ud0c0\uc785\uc774 \ubd84\uae30\ub418\ub294 \ud2b8\ub9ac \ub3c4\uc2dd\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uc720\ud2f8\ub9ac\ud2f0 \ud0c0\uc785(11\ud3b8) \ub4e4\uc774 \uc5b4\ub5bb\uac8c \ub9cc\ub4e4\uc5b4\uc84c\ub098 \ub4e4\uc5ec\ub2e4\ubcf4\uba74 \uac70\uc758 \ubaa8\ub450 <strong>\uc870\uac74\ubd80 \ud0c0\uc785<\/strong>\uc774 \uae30\ubc18\uc785\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc0bc\ud56d \uc5f0\uc0b0\uc790(<code>x ? a : b<\/code>) \uc640 \uac19\uc740 \ubaa8\uc591 \u2014 \ub2e4\ub9cc \ud0c0\uc785 \ub808\ubca8\uc5d0\uc11c \ub3d9\uc791\ud569\ub2c8\ub2e4. 12\ud3b8\uc740 \uc870\uac74\ubd80 \ud0c0\uc785\uacfc \uadf8 \ub3d9\ubc18\uc790 <code>infer<\/code>\u00b7<strong>\ubd84\ubc30 \uc870\uac74\ubd80 \ud0c0\uc785<\/strong>\uae4c\uc9c0.<\/p>\n\n<h2>\uae30\ubcf8\ud615 \u2014 T extends U ? X : Y<\/h2>\n\n<pre><code>type IsString&lt;T&gt; = T extends string ? true : false;\n\ntype A = IsString&lt;\"hello\"&gt;;    \/\/ true\ntype B = IsString&lt;42&gt;;          \/\/ false\ntype C = IsString&lt;string&gt;;      \/\/ true\n\n\/\/ \uc2e4\uc6a9 \uc608 \u2014 null\/undefined \uc81c\uac70 (NonNullable \uc758 \uc815\uc758)\ntype MyNonNullable&lt;T&gt; = T extends null | undefined ? never : T;<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\uc77d\ub294 \ubc29\ubc95.<\/strong> &#8220;T \uac00 U \uc758 \ubd80\ubd84\uc9d1\ud569(\ud560\ub2f9 \uac00\ub2a5) \uc774\uba74 X, \uc544\ub2c8\uba74 Y&#8221;. <code>extends<\/code> \ub294 &#8220;\uc0c1\uc18d&#8221; \ubcf4\ub2e4\ub294 &#8220;\uc774\uac83\uc5d0 \ud560\ub2f9 \uac00\ub2a5&#8221; \uc73c\ub85c \uc77d\ub294 \uac8c \uc815\ud655.<\/p>\n<\/div>\n\n<h2>infer \u2014 \ub9e4\uce58\ub41c \uc77c\ubd80\ub97c \ubcc0\uc218\ub85c \ucea1\ucc98<\/h2>\n\n<pre><code>\/\/ \ud568\uc218\uc758 \ubc18\ud658 \ud0c0\uc785\ub9cc \ubf51\uae30 (ReturnType \uc758 \uc815\uc758)\ntype MyReturnType&lt;F&gt; = F extends (...args: any) =&gt; infer R ? R : never;\n\ntype R1 = MyReturnType&lt;() =&gt; number&gt;;          \/\/ number\ntype R2 = MyReturnType&lt;(x: string) =&gt; User&gt;;   \/\/ User\n\n\/\/ Promise \uc548 \ud480\uae30 (Awaited \uc758 \ud575\uc2ec)\ntype Unwrap&lt;T&gt; = T extends Promise&lt;infer V&gt; ? V : T;\ntype V = Unwrap&lt;Promise&lt;number&gt;&gt;;               \/\/ number\n\n\/\/ \ubc30\uc5f4\uc758 \uc6d0\uc18c \ud0c0\uc785\ntype ElementOf&lt;T&gt; = T extends (infer E)[] ? E : never;\ntype E = ElementOf&lt;User[]&gt;;                    \/\/ User<\/code><\/pre>\n\n<p><code>infer<\/code> \ub294 &#8220;\ud0c0\uc785 \ub9e4\uce6d\ud558\uba74\uc11c \uc77c\ubd80\ub97c \ubcc0\uc218\uc5d0 \ub2f4\uc544\ub450\uae30&#8221;. \uc815\uaddc\uc2dd\uc758 \ucea1\ucc98 \uadf8\ub8f9\uacfc \ub2ee\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n\n<h2>\ubd84\ubc30 \uc870\uac74\ubd80 \ud0c0\uc785 \u2014 \uc720\ub2c8\uc628\uc774 \uc790\ub3d9 \ubd84\uae30<\/h2>\n\n<pre><code>type ToArray&lt;T&gt; = T extends any ? T[] : never;\n\ntype X = ToArray&lt;string | number&gt;;\n\/\/ \uc758\uc678: string[] | number[]   \u2190 \uc720\ub2c8\uc628 \uac01 \uba64\ubc84\uc5d0 \uc790\ub3d9 \ubd84\ubc30\n\/\/ \uc9c1\uad00: (string | number)[]   \u2190 \uc544\ub2d8!\n\n\/\/ \uc65c? \uc720\ub2c8\uc628 + \uc870\uac74\ubd80 = \uc790\ub3d9 \ubd84\ubc30 (\ubc97\uae30\uc9c0 \uc54a\uac8c \ud558\ub824\uba74 [] \ub85c \uac10\uc2f8\uae30)\ntype ToArrayNo&lt;T&gt; = [T] extends [any] ? T[] : never;\ntype Y = ToArrayNo&lt;string | number&gt;;   \/\/ (string | number)[]<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\ubd84\ubc30\uc758 \ud568\uc815.<\/strong> &#8220;T extends U&#8221; \uc5d0\uc11c T \uac00 \uc720\ub2c8\uc628\uc774\uba74 \uc790\ub3d9\uc73c\ub85c \uba64\ubc84\ubcc4\ub85c \ud480\ub824\uc11c \uc801\uc6a9\ub429\ub2c8\ub2e4. <strong>\ub300\ubd80\ubd84 \uc720\uc6a9<\/strong>\ud558\uc9c0\ub9cc \uac00\ub054 \uc758\ub3c4\uc640 \ub2e4\ub97c \ub54c \uc704 <code>[T] extends [U]<\/code> \ud2b8\ub9ad\uc73c\ub85c \ub9c9\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<h2>Exclude \u00b7 Extract \u2014 \ubd84\ubc30\uc758 \uc751\uc6a9<\/h2>\n\n<pre><code>\/\/ \uc720\ud2f8\ub9ac\ud2f0 \ud0c0\uc785\uc758 \uc2e4\uc81c \uc815\uc758 (\ub2e8\uc21c)\ntype MyExclude&lt;T, U&gt; = T extends U ? never : T;\ntype MyExtract&lt;T, U&gt; = T extends U ? T : never;\n\n\/\/ \ub3d9\uc791 (\ubd84\ubc30 \ub355\ubd84)\ntype A = MyExclude&lt;\"a\" | \"b\" | \"c\", \"b\"&gt;;\n\/\/ = (\"a\" extends \"b\" ? never : \"a\")    \u2192 \"a\"\n\/\/ | (\"b\" extends \"b\" ? never : \"b\")    \u2192 never\n\/\/ | (\"c\" extends \"b\" ? never : \"c\")    \u2192 \"c\"\n\/\/ = \"a\" | \"c\"<\/code><\/pre>\n\n<h2>\uc2e4\uc804 \u2014 API \uc751\ub2f5 \ud0c0\uc785 \uc548\uc804\ud558\uac8c \ud480\uae30<\/h2>\n\n<pre><code>type ApiResponse&lt;T&gt; =\n  | { ok: true; data: T }\n  | { ok: false; error: string };\n\n\/\/ \uc131\uacf5\ub9cc \uace8\ub77c data \ud0c0\uc785 \ubf51\uae30\ntype SuccessData&lt;R&gt; = R extends { ok: true; data: infer D } ? D : never;\n\ntype UserResp = ApiResponse&lt;{ id: number; name: string }&gt;;\ntype UserData = SuccessData&lt;UserResp&gt;;\n\/\/ = { id: number; name: string }<\/code><\/pre>\n\n<h2>literal \uc881\ud788\uae30 + \uc870\uac74\ubd80<\/h2>\n\n<pre><code>\/\/ \uc785\ub825 \ud0c0\uc785\uc5d0 \ub530\ub77c \ubc18\ud658 \ud0c0\uc785\uc774 \ub2ec\ub77c\uc9c0\ub294 \ud568\uc218\nfunction format&lt;T extends number | string&gt;(x: T): T extends number ? string : number {\n  return (typeof x === \"number\" ? String(x) : Number(x)) as any;\n}\n\nconst a = format(10);       \/\/ string\nconst b = format(\"10\");     \/\/ number<\/code><\/pre>\n\n<p>\uc774\uac8c overload(3\ud3b8) \uc758 \ub354 \uac15\ub825\ud55c \ub300\uc548. \uc785\ub825-\ucd9c\ub825 \uad00\uacc4\ub97c \ud55c \uc904\ub85c \ud45c\ud604.<\/p>\n\n<h2>\uc2e4\uc804 \uc790\uc8fc \ub9cc\ub098\ub294 \uc870\uac74\ubd80 \ud0c0\uc785 \ud328\ud134<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\ud328\ud134<\/th><th>\uc5ed\ud560<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\ud328\ud134\">T extends Function ? &#8230; : &#8230;<\/td><td data-label=\"\uc5ed\ud560\">\ud568\uc218\ub9cc \ubd84\uae30<\/td><\/tr>\n    <tr><td data-label=\"\ud328\ud134\">T extends any[] ? &#8230; : &#8230;<\/td><td data-label=\"\uc5ed\ud560\">\ubc30\uc5f4\ub9cc \ubd84\uae30<\/td><\/tr>\n    <tr><td data-label=\"\ud328\ud134\">T extends Promise&lt;infer V&gt; ? V : T<\/td><td data-label=\"\uc5ed\ud560\">Promise \ud480\uae30<\/td><\/tr>\n    <tr><td data-label=\"\ud328\ud134\">F extends (&#8230;a: infer A) =&gt; any ? A : never<\/td><td data-label=\"\uc5ed\ud560\">\ud568\uc218 \ub9e4\uac1c\ubcc0\uc218 \ud29c\ud50c<\/td><\/tr>\n    <tr><td data-label=\"\ud328\ud134\">T extends &#123; type: U &#125; ? T : never<\/td><td data-label=\"\uc5ed\ud560\">discriminated \uc720\ub2c8\uc628 \uc881\ud788\uae30<\/td><\/tr>\n    <tr><td data-label=\"\ud328\ud134\">T extends \\`${U}${infer R}\\` ? R : never<\/td><td data-label=\"\uc5ed\ud560\">\ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4 \ud0c0\uc785 (5.0+)<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"warnbox\">\n  <p><strong>\ub108\ubb34 \uae4a\uac8c \ub4e4\uc5b4\uac00\uc9c0 \ub9c8\uc138\uc694.<\/strong> \uc870\uac74\ubd80 \ud0c0\uc785\uc744 5-6 \ub2e8\uacc4 \uc911\ucca9\ud55c \ucf54\ub4dc\ub294 \ub204\uad6c\ub3c4 \ubabb \uc77d\uc2b5\ub2c8\ub2e4. \ub77c\uc774\ube0c\ub7ec\ub9ac \ucf54\ub4dc\ub77c\uba74 \uac00\uce58 \uc788\uc9c0\ub9cc, \uc77c\ubc18 \uc571 \ucf54\ub4dc\ub294 <strong>\uc720\ud2f8\ub9ac\ud2f0 \ud0c0\uc785 \uc870\ud569<\/strong> \uc73c\ub85c \ub05d\ub0b4\ub294 \uac8c \ubcf4\ud1b5 \uc815\ub2f5.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>13\ud3b8 \u2014 \ub9e4\ud551 \ud0c0\uc785 (keyof + [K in T])<\/h3>\n  <p>\uc18d\uc131 \ub2e8\uc704\ub85c \ud0c0\uc785\uc744 \ubcc0\ud615\ud558\ub294 \ub354 \uac15\ub825\ud55c \ub3c4\uad6c.<\/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: 11\ud3b8 \uc720\ud2f8\ub9ac\ud2f0 \u00b7 \ud604\uc7ac: <strong>12\ud3b8 (\uc911\uae09)<\/strong> \u00b7 \ub2e4\uc74c \u2192 13\ud3b8 \ub9e4\ud551 \ud0c0\uc785 \u00b7 \uc9c4\ud589: <strong>12\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc870\uac74\ubd80 \ud0c0\uc785\u00b7infer\u00b7\ubd84\ubc30 \uc870\uac74\ubd80. 20\ud3b8 \uad50\uc7ac 12\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-501","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\/501","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=501"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/289"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}