{"id":486,"date":"2026-05-17T07:02:01","date_gmt":"2026-05-16T23:02:01","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-union-intersection-5\/"},"modified":"2026-05-17T07:08:41","modified_gmt":"2026-05-16T23:08:41","slug":"ts-union-intersection-5","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-union-intersection-5\/","title":{"rendered":"\uc720\ub2c8\uc628\uacfc \uc778\ud130\uc139\uc158 \u2014 A | B \uc640 A &#038; B (\uae30\ucd08 5\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 267 -->\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 5\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\uc720\ub2c8\uc628\uacfc \uc778\ud130\uc139\uc158 \u2014 A | B \uc640 A &amp; B<\/h1>\n  <p class=\"sub\">&#8220;\uc774\uac83 \ub610\ub294 \uc800\uac83&#8221; \uacfc &#8220;\uc774\uac83\uc774\uba74\uc11c \uc800\uac83&#8221; \u2014 \uac00\uc7a5 \uc790\uc8fc \uc4f0\ub294 \ub450 \ud569\uc131.<\/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-47.jpg\" alt=\"A | B (\ubca4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 \ud569\uc9d1\ud569)\uc640 A &#038; B (\uad50\uc9d1\ud569) \ub3c4\uc2dd\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uc785\ubb38 \ud30c\ud2b8\uac00 \ub05d\ub0ac\uc2b5\ub2c8\ub2e4. 5\ud3b8\ubd80\ud130\ub294 \uae30\ucd08 \ud30c\ud2b8 \u2014 \ubcf8\uaca9\uc801\uc73c\ub85c &#8220;TS \ub2e4\uc6b4&#8221; \ud0c0\uc785 \ud569\uc131\uc744 \ub2e4\ub8f9\ub2c8\ub2e4. \uadf8 \uccab \ubc88\uc9f8\uac00 <strong>\uc720\ub2c8\uc628(<code>|<\/code>)<\/strong>\uacfc <strong>\uc778\ud130\uc139\uc158(<code>&amp;<\/code>)<\/strong>\uc785\ub2c8\ub2e4. \ub458\uc740 \uac70\uc758 \ubaa8\ub4e0 \uc2e4\uc804 \ud0c0\uc785 \uc124\uacc4\uc758 \ucd9c\ubc1c\uc810\uc774\uc5d0\uc694.<\/p>\n\n<h2>\uc720\ub2c8\uc628 \u2014 &#8220;\uc774\uac83 \ub610\ub294 \uc800\uac83&#8221;<\/h2>\n\n<pre><code>\/\/ \ubcc0\uc218\uac00 string \ub610\ub294 number \uc911 \ud558\ub098\nlet id: string | number;\nid = \"abc\";      \/\/ OK\nid = 42;         \/\/ OK\nid = true;       \/\/ \u274c\n\n\/\/ \ud568\uc218 \ub9e4\uac1c\ubcc0\uc218\ub3c4 \uc720\ub2c8\uc628\nfunction format(input: string | number): string {\n  \/\/ \uc5ec\uae30\uc11c\ub294 input \uc774 string|number \u2014 \uc591\ucabd \ub2e4\uc5d0 \uc788\ub294 \uba54\uc11c\ub4dc\ub9cc \ud638\ucd9c \uac00\ub2a5\n  return String(input);\n}<\/code><\/pre>\n\n<p>\uc720\ub2c8\uc628\uc740 <strong>&#8220;\uac00\ub2a5\ud55c \ud0c0\uc785\uc758 \uc9d1\ud569&#8221;<\/strong>\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\ud558\ub824\uba74 &#8220;\uc9c0\uae08 \ubb34\uc5c7\uc778\uc9c0&#8221; \uc881\ud600\uc57c \ud569\ub2c8\ub2e4 \u2014 \uadf8\uac8c \ub2e4\uc74c \uc808\uc758 narrowing.<\/p>\n\n<h2>\uc881\ud788\uae30(narrowing) \u2014 \uc720\ub2c8\uc628\uc744 \ub2e4\ub8e8\ub294 \ud575\uc2ec<\/h2>\n\n<pre><code>function format(input: string | number): string {\n  if (typeof input === \"string\") {\n    return input.toUpperCase();   \/\/ \u2705 \uc5ec\uae30\uc11c\ub294 string \ud655\uc815\n  }\n  return input.toFixed(2);        \/\/ \u2705 \uc5ec\uae30\uc11c\ub294 number \ud655\uc815\n}<\/code><\/pre>\n\n<p>TS \ub294 <code>typeof<\/code>\u00b7<code>instanceof<\/code>\u00b7<code>in<\/code>\u00b7<code>===<\/code> \uac19\uc740 \uac80\uc0ac\ub97c \ubcf4\uba74 \ud750\ub984\uc5d0 \ub530\ub77c \ud0c0\uc785\uc744 \uc881\ud799\ub2c8\ub2e4. \uc774\uac78 <strong>\uc81c\uc5b4 \ud750\ub984 \ubd84\uc11d(control flow analysis)<\/strong> \uc774\ub77c\uace0 \ubd80\ub974\ub294\ub370, IDE \uc790\ub3d9\uc644\uc131\uc774 if \uc548\uacfc \ubc16\uc5d0\uc11c \ub2ec\ub77c\uc9c0\ub294 \ube44\uacb0\uc785\ub2c8\ub2e4.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\uc881\ud788\ub294 \ub3c4\uad6c<\/th><th>\uc608\uc2dc<\/th><th>\uc5b8\uc81c<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\ub3c4\uad6c\">typeof<\/td><td data-label=\"\uc608\uc2dc\"><code>typeof x === \"string\"<\/code><\/td><td data-label=\"\uc5b8\uc81c\">primitive<\/td><\/tr>\n    <tr><td data-label=\"\ub3c4\uad6c\">instanceof<\/td><td data-label=\"\uc608\uc2dc\"><code>err instanceof Error<\/code><\/td><td data-label=\"\uc5b8\uc81c\">\ud074\ub798\uc2a4 \uc778\uc2a4\ud134\uc2a4<\/td><\/tr>\n    <tr><td data-label=\"\ub3c4\uad6c\">in<\/td><td data-label=\"\uc608\uc2dc\"><code>\"name\" in obj<\/code><\/td><td data-label=\"\uc5b8\uc81c\">\uac1d\uccb4 \uc18d\uc131 \uc720\ubb34<\/td><\/tr>\n    <tr><td data-label=\"\ub3c4\uad6c\">===<\/td><td data-label=\"\uc608\uc2dc\"><code>shape.kind === \"circle\"<\/code><\/td><td data-label=\"\uc5b8\uc81c\">\ub9ac\ud130\ub7f4 \ube44\uad50 (\uad6c\ubd84 \uac00\ub2a5 \uc720\ub2c8\uc628)<\/td><\/tr>\n    <tr><td data-label=\"\ub3c4\uad6c\">\uc0ac\uc6a9\uc790 \uc815\uc758<\/td><td data-label=\"\uc608\uc2dc\"><code>function isUser(x): x is User<\/code><\/td><td data-label=\"\uc5b8\uc81c\">14\ud3b8<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<h2>\uad6c\ubd84 \uac00\ub2a5 \uc720\ub2c8\uc628 \u2014 \uc2e4\uc804\uc758 \ubcf4\uc11d<\/h2>\n\n<pre><code>\/\/ \uac01 \uba64\ubc84\uc5d0 \"\uaf2c\ub9ac\ud45c\"(discriminant) \uac00 \uc788\ub294 \uc720\ub2c8\uc628\ntype Shape =\n  | { kind: \"circle\"; radius: number }\n  | { kind: \"square\"; side: number }\n  | { kind: \"rect\";   w: number; h: number };\n\nfunction area(s: Shape): number {\n  switch (s.kind) {\n    case \"circle\": return Math.PI * s.radius ** 2;   \/\/ s \ub294 circle \ub85c \uc881\ud600\uc9d0\n    case \"square\": return s.side ** 2;\n    case \"rect\":   return s.w * s.h;\n  }\n}<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\uc2e4\uc804\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc774 \uc4f0\ub294 \ud328\ud134.<\/strong> API \uc751\ub2f5\uc758 success\/error \ubd84\uae30, \ub9ac\ub355\uc2a4 \uc561\uc158, \uc0c1\ud0dc \uba38\uc2e0 \u2014 \uac70\uc758 \ubaa8\ub450 \uad6c\ubd84 \uac00\ub2a5 \uc720\ub2c8\uc628\uc73c\ub85c \ubaa8\ub378\ub9c1\ud569\ub2c8\ub2e4. <code>kind<\/code> \/ <code>type<\/code> \/ <code>status<\/code> \uac19\uc740 literal \ud544\ub4dc \ud558\ub098\ub85c \ub098\uba38\uc9c0 \ubaa8\uc591\uc774 \uacb0\uc815\ub418\ub2c8\uae4c\uc694.<\/p>\n<\/div>\n\n<h2>\uc778\ud130\uc139\uc158 \u2014 &#8220;\uc774\uac83\uc774\uba74\uc11c \uc800\uac83&#8221;<\/h2>\n\n<pre><code>type Named   = { name: string };\ntype Aged    = { age: number };\ntype Person  = Named &amp; Aged;     \/\/ { name; age }\n\nconst p: Person = { name: \"\uc900\uc131\", age: 39 };\n\n\/\/ \ud568\uc218 \ud569\uce58\uae30 \u2014 mixin \ud328\ud134\ntype Loggable    = { log(): void };\ntype Serializable = { toJSON(): string };\ntype Service = Loggable &amp; Serializable;\n\n\/\/ \ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98 \ud569\uc131\ntype Add  = (a: number, b: number) =&gt; number;\ntype Bind = (this: void) =&gt; void;\ntype API  = Add &amp; Bind;          \/\/ \uac19\uc740 \ud568\uc218\uac00 \ub450 \ud638\ucd9c \uc2dc\uadf8\ub2c8\ucc98\ub97c \ub2e4 \uac16\ub294\ub2e4<\/code><\/pre>\n\n<p>\uc778\ud130\uc139\uc158\uc740 <strong>&#8220;\ub450 \ubaa8\uc591\uc744 \ubaa8\ub450 \ub9cc\uc871&#8221;<\/strong> \uc785\ub2c8\ub2e4. \uac1d\uccb4 \ud0c0\uc785\uc744 \uacb0\ud569\ud560 \ub54c \uac00\uc7a5 \uc790\uc8fc \uc4f0\uace0, \uc778\ud130\ud398\uc774\uc2a4\uc758 <code>extends<\/code> \uc640 \uac70\uc758 \uac19\uc740 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\uc720\ub2c8\uc628 vs \uc778\ud130\uc139\uc158 \u2014 \uc9c1\uad00\uacfc \ubc18\ub300\uc778 \ud55c \uac00\uc9c0<\/h2>\n\n<div class=\"warnbox\">\n  <p><strong>&#8220;<code>|<\/code> \ub294 OR \ub77c\uc11c \ub354 \ub113\ub2e4? \uc544\ub2c8\uc694.&#8221;<\/strong> \ud0c0\uc785\uc5d0\uc11c\ub294 \uac70\uafb8\ub85c\uc785\ub2c8\ub2e4.<\/p>\n  <p>\u00b7 <code>A | B<\/code> \u2014 <strong>\uac12\uc758 \uc9d1\ud569\uc740 \ub354 \ub113\uc9c0\ub9cc<\/strong>, <strong>\uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc18d\uc131\uc740 \ub354 \uc881\ub2e4<\/strong>(\uc591\ucabd\uc5d0 \uacf5\ud1b5\uc778 \uac83\ub9cc).<\/p>\n  <p>\u00b7 <code>A &amp; B<\/code> \u2014 <strong>\uac12\uc758 \uc9d1\ud569\uc740 \ub354 \uc881\uc9c0\ub9cc<\/strong>, <strong>\uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc18d\uc131\uc740 \ub354 \ub113\ub2e4<\/strong>(\uc591\ucabd \ud569).<\/p>\n<\/div>\n\n<pre><code>type Dog = { bark(): void };\ntype Cat = { meow(): void };\n\nlet pet: Dog | Cat = { bark(){} };\npet.bark();   \/\/ \u274c 'Cat' \uc5d0\ub294 bark \uac00 \uc5c6\uc73c\ub2c8\uae4c \uc548\uc804\ud558\uac8c \ub9c9\ud798\npet.meow();   \/\/ \u274c\n\nlet monster: Dog &amp; Cat = { bark(){}, meow(){} };\nmonster.bark();  \/\/ \u2705\nmonster.meow();  \/\/ \u2705<\/code><\/pre>\n\n<h2>\ub9ac\ud130\ub7f4 \uc720\ub2c8\uc628 \u2014 enum \uc758 \ub300\uccb4<\/h2>\n\n<pre><code>\/\/ 7\ud3b8\uc5d0\uc11c \ub2e4\ub8f0 enum \uc758 \uac00\ubcbc\uc6b4 \ub300\uc548\ntype Theme  = \"light\" | \"dark\" | \"auto\";\ntype Status = 200 | 404 | 500;\n\nfunction setTheme(t: Theme) { ... }\nsetTheme(\"light\");   \/\/ OK\nsetTheme(\"blue\");    \/\/ \u274c \ucef4\ud30c\uc77c \uc2dc\uc810\uc5d0 \ucc28\ub2e8<\/code><\/pre>\n\n<p>\ub300\ubd80\ubd84\uc758 \uc0c1\ud0dc\uac12\u00b7\ud14c\ub9c8\u00b7HTTP \ucf54\ub4dc \ub4f1\uc740 enum \ubcf4\ub2e4 \ub9ac\ud130\ub7f4 \uc720\ub2c8\uc628\uc774 \uac00\ubccd\uace0 \ub2e4\ub8e8\uae30 \uc88b\uc2b5\ub2c8\ub2e4. 7\ud3b8\uc5d0\uc11c enum \uacfc \ube44\uad50.<\/p>\n\n<div class=\"cta\">\n  <h3>6\ud3b8 \u2014 \uc81c\ub124\ub9ad \uc785\ubb38<\/h3>\n  <p>&lt;T&gt; \ud55c \uae00\uc790\uc758 \ud798. \uc65c \uc81c\ub124\ub9ad\uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac \ucf54\ub4dc\uc758 \ud575\uc2ec\uc778\uc9c0.<\/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: 4\ud3b8 interface vs type \u00b7 \ud604\uc7ac: <strong>5\ud3b8 (\uae30\ucd08 \uc2dc\uc791)<\/strong> \u00b7 \ub2e4\uc74c \u2192 6\ud3b8 \uc81c\ub124\ub9ad \u00b7 \uc9c4\ud589: <strong>5\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc720\ub2c8\uc628\u00b7\uc778\ud130\uc139\uc158\u00b7\uc881\ud788\uae30\u00b7\uad6c\ubd84 \uac00\ub2a5 \uc720\ub2c8\uc628. 20\ud3b8 \uad50\uc7ac 5\ud3b8 (\uae30\ucd08 \uc2dc\uc791).<\/p>\n","protected":false},"author":1,"featured_media":267,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-486","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\/486","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=486"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions\/525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/267"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}