{"id":484,"date":"2026-05-17T07:01:55","date_gmt":"2026-05-16T23:01:55","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-interface-vs-type-4\/"},"modified":"2026-05-17T07:06:41","modified_gmt":"2026-05-16T23:06:41","slug":"ts-interface-vs-type-4","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-interface-vs-type-4\/","title":{"rendered":"\uac1d\uccb4 \ud0c0\uc785 \u2014 interface vs type (\uc785\ubb38 4\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 264 -->\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 4\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\uac1d\uccb4 \ud0c0\uc785 \u2014 interface vs type<\/h1>\n  <p class=\"sub\">\ub450 \uac00\uc9c0 \ub3c4\uad6c, \ubbf8\ubb18\ud558\uac8c \ub2e4\ub978 \uc131\uaca9. \uc120\ud0dd \uae30\uc900 \ud55c \uc904\ub85c \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n  <div class=\"meta\"><span>\uc785\ubb38<\/span><span>\uc77d\ub294 \uc2dc\uac04 7\ubd84<\/span><span>2026-05-16<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-44.jpg\" alt=\"interface \uc640 type \ub450 \ubc15\uc2a4\uac00 \uc11c\ub85c\uc758 \uc7a5\ub2e8\uc810\uc744 \ube44\uad50\ud558\ub294 \ub3c4\uc2dd\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>TypeScript \uc5d0\uc11c \uac1d\uccb4\uc5d0 \ud0c0\uc785\uc744 \ubd99\uc774\ub294 \ubc29\ubc95\uc740 \ub450 \uac00\uc9c0 \u2014 <code>interface<\/code> \uc640 <code>type<\/code>(\ud0c0\uc785 \ubcc4\uce6d) \uc785\ub2c8\ub2e4. \uac70\uc758 \uac19\uc740 \uc77c\uc744 \ud558\uc9c0\ub9cc \ubbf8\ubb18\ud558\uac8c \ub2e4\ub985\ub2c8\ub2e4. 4\ud3b8\uc740 \uc774 \ub458\uc758 \ucc28\uc774\ub97c \uc815\ud655\ud788 \uc815\ub9ac\ud558\uace0, &#8220;\uc5b8\uc81c \uc5b4\ub5a4 \ucabd\uc744 \uace8\ub77c\uc57c \ud558\ub098&#8221; \uc758 \uc2e4\uc804 \uae30\uc900\uc744 \uc90d\ub2c8\ub2e4.<\/p>\n\n<h2>\uae30\ubcf8 \ubaa8\uc591 \u2014 \uac70\uc758 \ub611\uac19\ub2e4<\/h2>\n\n<pre><code>\/\/ interface\ninterface User {\n  id: number;\n  name: string;\n  email?: string;       \/\/ \uc635\uc158\n  readonly joinedAt: Date;\n}\n\n\/\/ type alias\ntype User = {\n  id: number;\n  name: string;\n  email?: string;\n  readonly joinedAt: Date;\n};\n\n\/\/ \uc0ac\uc6a9\uc740 \ub3d9\uc77c\nconst u: User = { id: 1, name: \"\uc900\uc131\", joinedAt: new Date() };<\/code><\/pre>\n\n<p>\uac1d\uccb4\uc758 \ubaa8\uc591(shape) \uc744 \uc801\ub294 \uac8c \uc804\ubd80\ub77c\uba74 \ub458\uc740 \uc0ac\uc2e4\uc0c1 \uac19\uc2b5\ub2c8\ub2e4. \ucc28\uc774\ub294 &#8220;\ud655\uc7a5&#8221; \uacfc &#8220;\ud45c\ud604 \ubc94\uc704&#8221; \uc5d0\uc11c \ub098\uc635\ub2c8\ub2e4.<\/p>\n\n<h2>\ud655\uc7a5\ud558\uae30 \u2014 extends vs &#038;<\/h2>\n\n<pre><code>\/\/ interface \u2014 extends\ninterface Admin extends User {\n  role: \"admin\" | \"owner\";\n}\n\n\/\/ type \u2014 & (\uc778\ud130\uc139\uc158)\ntype Admin = User &amp; {\n  role: \"admin\" | \"owner\";\n};\n\n\/\/ \ub458 \ub2e4 \uac19\uc740 \uacb0\uacfc\nconst a: Admin = { id: 1, name: \"\uc900\uc131\", joinedAt: new Date(), role: \"admin\" };<\/code><\/pre>\n\n<p>\uc5ec\ub7ec \uac1c \ud655\uc7a5\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4 \u2014 interface \ub294 \ucf64\ub9c8\ub85c, type \uc740 <code>&<\/code> \ub97c \uc5f0\uc774\uc5b4:<\/p>\n\n<pre><code>interface C extends A, B { ... }\ntype     C = A &amp; B &amp; { ... };<\/code><\/pre>\n\n<h2>declaration merging \u2014 interface \ub9cc\uc758 \ub2a5\ub825<\/h2>\n\n<pre><code>\/\/ interface \ub294 \uac19\uc740 \uc774\ub984\uc73c\ub85c \uc5ec\ub7ec \ubc88 \uc120\uc5b8\ud558\uba74 \ud569\uccd0\uc9d1\ub2c8\ub2e4\ninterface Window {\n  customProp: string;\n}\ninterface Window {\n  anotherProp: number;\n}\n\/\/ \uacb0\uacfc: Window \uac00 \ub450 \uc18d\uc131 \ubaa8\ub450 \uac00\uc9d0\n\n\/\/ type \uc740 \uac19\uc740 \uc774\ub984\uc73c\ub85c \ub450 \ubc88 \uc120\uc5b8 \ubd88\uac00\ntype X = { a: number };\ntype X = { b: number };   \/\/ \u274c Duplicate identifier 'X'<\/code><\/pre>\n\n<p>\uc774 \uae30\ub2a5\uc740 <strong>\ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uae00\ub85c\ubc8c \ud0c0\uc785 \ud655\uc7a5<\/strong>(window, Express Request \ub4f1) \uc5d0 \uac70\uc758 \uc720\uc77c\ud558\uac8c \uc4f0\uc785\ub2c8\ub2e4. \ud3c9\uc18c \ucf54\ub4dc\uc5d0\uc11c\ub294 \uc758\uc678\uc131\uc774 \ub354 \ucee4\uc11c \uc4f0\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. <strong>\ub300\ubd80\ubd84\uc758 \uacbd\uc6b0 \ub2e8\uc810<\/strong> \uc73c\ub85c \uc791\uc6a9\ud574\uc694 \u2014 \ub2e4\ub978 \ud30c\uc77c\uc774 \ubab0\ub798 \ud569\uccd0\ubc84\ub9b4 \uc218 \uc788\uc73c\ub2c8\uae4c\uc694.<\/p>\n\n<h2>type \ub9cc\uc758 \ub2a5\ub825 \u2014 primitive\u00b7\uc720\ub2c8\uc628\u00b7\ud29c\ud50c<\/h2>\n\n<pre><code>\/\/ interface \ub294 \uac1d\uccb4 \ubaa8\uc591\ub9cc \ud45c\ud604 \uac00\ub2a5\n\/\/ type \uc740 \uac70\uc758 \ubaa8\ub4e0 \uac83\uc744 \ud45c\ud604 \uac00\ub2a5\n\ntype ID    = string | number;            \/\/ \uc720\ub2c8\uc628\ntype Pair  = [string, number];           \/\/ \ud29c\ud50c\ntype Color = \"red\" | \"green\" | \"blue\";   \/\/ literal \uc720\ub2c8\uc628\ntype Fn    = (x: number) =&gt; number;      \/\/ \ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98\ntype Lazy&lt;T&gt; = () =&gt; T;                  \/\/ \uc81c\ub124\ub9ad alias\n\n\/\/ \ub354 \uae4a\uc740 \ud45c\ud604 (12\u00b713\ud3b8\uc5d0\uc11c \ub2e4\ub8f8)\ntype Keys&lt;T&gt; = keyof T;\ntype Maybe&lt;T&gt; = T | null | undefined;<\/code><\/pre>\n\n<p>\uc774\uac8c \uac00\uc7a5 \ud070 \ucc28\uc774\uc785\ub2c8\ub2e4. <strong>&#8220;\uac1d\uccb4\uac00 \uc544\ub2cc \ud0c0\uc785\uc5d0 \uc774\ub984\uc744 \ubd99\uc774\uace0 \uc2f6\ub2e4&#8221;<\/strong> \uba74 type \uc774 \uc720\uc77c\ud55c \ub2f5\uc785\ub2c8\ub2e4.<\/p>\n\n<h2>\uc120\ud0dd \uae30\uc900 \u2014 \ud55c \uc904\uc9dc\ub9ac \uac00\uc774\ub4dc<\/h2>\n\n<div class=\"databox\">\n  <p><strong>\uc2e4\uc804 \uad8c\uc7a5 (TS \uacf5\uc2dd \uad8c\uc7a5\uacfc \uac19\uc74c).<\/strong><\/p>\n  <p>\u2460 <strong>\uac1d\uccb4 \ubaa8\uc591 + extends<\/strong> \u2192 <strong>interface<\/strong> \uc120\ud638 (\ud074\ub798\uc2a4\u00b7DTO\u00b7\ub3c4\uba54\uc778 \ubaa8\ub378).<\/p>\n  <p>\u2461 <strong>\uc720\ub2c8\uc628\u00b7\ud29c\ud50c\u00b7\ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98\u00b7\uace0\ucc28 \ud0c0\uc785<\/strong> \u2192 <strong>type<\/strong>.<\/p>\n  <p>\u2462 \ud55c \ud504\ub85c\uc81d\ud2b8 \uc548\uc5d0\uc11c\ub294 <strong>\uc77c\uad00\uc131<\/strong>\uc774 \uac00\uc7a5 \uc911\uc694. \ud300\uc774 type \ub9cc \uc4f0\uae30\ub85c \ud588\uc73c\uba74 type \ub9cc, interface \ub9cc \uc4f0\uae30\ub85c \ud588\uc73c\uba74 interface \ub9cc.<\/p>\n<\/div>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\ud2b9\uc9d5<\/th><th>interface<\/th><th>type<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\ud2b9\uc9d5\">\uac1d\uccb4 \ubaa8\uc591<\/td><td data-label=\"interface\">\u2705<\/td><td data-label=\"type\">\u2705<\/td><\/tr>\n    <tr><td data-label=\"\ud2b9\uc9d5\">\ud655\uc7a5<\/td><td data-label=\"interface\">extends<\/td><td data-label=\"type\">&amp; \uc778\ud130\uc139\uc158<\/td><\/tr>\n    <tr><td data-label=\"\ud2b9\uc9d5\">\uc720\ub2c8\uc628\u00b7\ud29c\ud50c\u00b7\ud568\uc218<\/td><td data-label=\"interface\">\u274c<\/td><td data-label=\"type\">\u2705<\/td><\/tr>\n    <tr><td data-label=\"\ud2b9\uc9d5\">declaration merging<\/td><td data-label=\"interface\">\u2705 (\uac00\ub054 \uc720\uc6a9)<\/td><td data-label=\"type\">\u274c<\/td><\/tr>\n    <tr><td data-label=\"\ud2b9\uc9d5\">\uc81c\ub124\ub9ad<\/td><td data-label=\"interface\">\u2705<\/td><td data-label=\"type\">\u2705<\/td><\/tr>\n    <tr><td data-label=\"\ud2b9\uc9d5\">readonly\u00b7\uc635\uc158 ? \ud45c\uae30<\/td><td data-label=\"interface\">\u2705<\/td><td data-label=\"type\">\u2705<\/td><\/tr>\n    <tr><td data-label=\"\ud2b9\uc9d5\">implements (class)<\/td><td data-label=\"interface\">\u2705 \uc790\uc5f0\uc2a4\ub7ec\uc6c0<\/td><td data-label=\"type\">\u2705 (\uac1d\uccb4 \ud0c0\uc785 \ud55c\uc815)<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<h2>readonly\u00b7\uc635\uc158 \u2014 \ub458 \ub2e4 \uc4f0\ub294 \ud575\uc2ec<\/h2>\n\n<pre><code>interface Settings {\n  readonly version: string;     \/\/ \ud55c \ubc88 \uc815\ud574\uc9c0\uba74 \ubcc0\uacbd \uae08\uc9c0\n  theme?: \"light\" | \"dark\";     \/\/ \uc635\uc158\n}\n\nconst s: Settings = { version: \"1.0\" };\ns.version = \"1.1\";              \/\/ \u274c readonly\ns.theme  = \"dark\";              \/\/ OK<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\uc778\ud130\ud398\uc774\uc2a4 vs \ud074\ub798\uc2a4\uc758 implements.<\/strong> \ud074\ub798\uc2a4\uc5d0 &#8220;\uc774 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud558\ub77c&#8221; \uace0 \uac15\uc81c\ud560 \ub54c <code>class User implements UserShape { ... }<\/code> \ucc98\ub7fc \uc501\ub2c8\ub2e4. interface \uac00 \uc790\uc5f0\uc2a4\ub7fd\uace0, type \ub3c4 \uac00\ub2a5\ud558\uc9c0\ub9cc \uc77c\ubd80 \ud658\uacbd\uc5d0\uc11c \uba54\uc2dc\uc9c0\uac00 \ub35c \uce5c\uc808\ud569\ub2c8\ub2e4. OOP \uc0c9\uc774 \uc9c4\ud55c \ucf54\ub4dc\uc5d0\uc11c\ub294 interface \uac00 \uc775\uc219\ud569\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>5\ud3b8 \u2014 \uc720\ub2c8\uc628\uacfc \uc778\ud130\uc139\uc158<\/h3>\n  <p>A | B \uc640 A &amp; B, \uc881\ud788\uae30(narrowing), \uadf8\ub9ac\uace0 \uc9c4\uc9dc \uc720\uc6a9\ud55c \uad6c\ubd84 \uac00\ub2a5 \uc720\ub2c8\uc628(discriminated union).<\/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: 3\ud3b8 \ud568\uc218 \ud0c0\uc785 \u00b7 \ud604\uc7ac: <strong>4\ud3b8 (\uc785\ubb38)<\/strong> \u00b7 \ub2e4\uc74c \u2192 5\ud3b8 \uc720\ub2c8\uc628\u00b7\uc778\ud130\uc139\uc158 \u00b7 \uc9c4\ud589: <strong>4\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>interface \uc640 type alias \uc758 \ucc28\uc774\u00b7\ud655\uc7a5\u00b7\uc120\ud0dd \uae30\uc900. 20\ud3b8 \uad50\uc7ac 4\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":264,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-484","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\/484","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=484"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/484\/revisions\/524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/264"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}