{"id":482,"date":"2026-05-17T07:01:49","date_gmt":"2026-05-16T23:01:49","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-function-types-3\/"},"modified":"2026-05-17T07:04:38","modified_gmt":"2026-05-16T23:04:38","slug":"ts-function-types-3","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-function-types-3\/","title":{"rendered":"\ud568\uc218\uc5d0 \ud0c0\uc785 \ubd99\uc774\uae30 \u2014 \ub9e4\uac1c\ubcc0\uc218\u00b7\ubc18\ud658\u00b7\uc635\uc158 (\uc785\ubb38 3\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 261 -->\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 3\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\ud568\uc218\uc5d0 \ud0c0\uc785 \ubd99\uc774\uae30 \u2014 \ub9e4\uac1c\ubcc0\uc218\u00b7\ubc18\ud658\u00b7\uc635\uc158<\/h1>\n  <p class=\"sub\">\ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98 \uae30\ubcf8\u00b7\uc635\uc158 \ud30c\ub77c\ubbf8\ud130\u00b7\uae30\ubcf8\uac12\u00b7rest\u00b7void\u00b7overload \uae4c\uc9c0 \ud55c \ubc88\uc5d0.<\/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-41.jpg\" alt=\"TypeScript \ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98\uc640 \ub9e4\uac1c\ubcc0\uc218\u00b7\ubc18\ud658 \ud0c0\uc785\uc774 \uc0c9\uc0c1\uc73c\ub85c \uac15\uc870\ub41c \ud654\uba74\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\ubcc0\uc218\uc5d0 \ud0c0\uc785\uc744 \ubd99\uc600\ub2e4\uba74, \ub2e4\uc74c\uc740 \ud568\uc218\uc785\ub2c8\ub2e4. TS \uac00 \uac00\uc7a5 \ube5b\ub098\ub294 \uacf3\uc774 \ubc14\ub85c \uc5ec\uae30 \u2014 <strong>&#8220;\uc774 \ud568\uc218\uc5d0 \ubb34\uc5c7\uc744 \ub123\uc73c\uba74 \ubb34\uc5c7\uc774 \ub098\uc624\ub098&#8221;<\/strong> \uac00 IDE \uc758 \uc790\ub3d9\uc644\uc131\uacfc \ube68\uac04 \uc904\ub85c \uc989\uc2dc \ubcf4\uc785\ub2c8\ub2e4. 3\ud3b8\uc740 \uadf8 \uc2dc\uadf8\ub2c8\ucc98\ub97c \uc791\uc131\ud558\ub294 \ubaa8\ub4e0 \ud328\ud134\uc744 \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\uae30\ubcf8 \uc2dc\uadf8\ub2c8\ucc98 \u2014 \ub9e4\uac1c\ubcc0\uc218\uc640 \ubc18\ud658<\/h2>\n\n<pre><code>\/\/ \ud568\uc218 \uc120\uc5b8\ubb38\nfunction add(a: number, b: number): number {\n  return a + b;\n}\n\n\/\/ \ud654\uc0b4\ud45c \ud568\uc218\nconst multiply = (a: number, b: number): number => a * b;\n\n\/\/ \ubc18\ud658 \ud0c0\uc785 \uc0dd\ub7b5 (\ucd94\ub860\uc5d0 \ub9e1\uae40 \u2014 \uad8c\uc7a5)\nconst greet = (name: string) => `\uc548\ub155, ${name}!`;\n\/\/    ^? const greet: (name: string) => string<\/code><\/pre>\n\n<p>\ub9e4\uac1c\ubcc0\uc218\ub294 <strong>\ud56d\uc0c1 \ud0c0\uc785\uc744 \uc801\uc5b4\uc57c \ud569\ub2c8\ub2e4<\/strong>(strict \ubaa8\ub4dc \uae30\uc900). \ubc18\ud658 \ud0c0\uc785\uc740 \ucd94\ub860\uc5d0 \ub9e1\uaca8\ub3c4 \ub429\ub2c8\ub2e4 \u2014 \ud568\uc218 \uc548\uc758 return \ub9cc \ubcf4\uba74 TS \uac00 \uc54c\uc544\ub0c5\ub2c8\ub2e4. \ub2e4\ub9cc <strong>\uc678\ubd80\uc5d0 \uacf5\uac1c\ud558\ub294 \ud568\uc218(\ub77c\uc774\ube0c\ub7ec\ub9ac\u00b7API)<\/strong> \ub294 \ubc18\ud658\ub3c4 \uba85\uc2dc\ud558\ub294 \uac8c \uc88b\uc2b5\ub2c8\ub2e4 \u2014 \ubcf8\ubb38\uc774 \ubc14\ub00c\uc5b4\ub3c4 \uc2dc\uadf8\ub2c8\ucc98\uac00 \uc758\ub3c4\uc640 \uac19\uc740\uc9c0 \ubcf4\uc7a5\ub429\ub2c8\ub2e4.<\/p>\n\n<h2>\uc635\uc158 \ud30c\ub77c\ubbf8\ud130 \u00b7 \uae30\ubcf8\uac12 \u00b7 rest<\/h2>\n\n<pre><code>\/\/ \uc635\uc158 \ud30c\ub77c\ubbf8\ud130 \u2014 ? \ubd99\uc774\uba74 \uc548 \uc918\ub3c4 OK\nfunction makeUrl(path: string, query?: string): string {\n  return query ? `${path}?${query}` : path;\n}\nmakeUrl(\"\/users\");                       \/\/ OK\nmakeUrl(\"\/users\", \"page=1\");             \/\/ OK\n\/\/ query \uc758 \uc2e4\uc81c \ud0c0\uc785\uc740 string | undefined\n\n\/\/ \uae30\ubcf8\uac12 \u2014 \uc548 \uc8fc\uba74 \uc790\ub3d9\uc73c\ub85c \uc0ac\uc6a9\nfunction fetch(url: string, retries = 3) {\n  \/\/                            ^? number \u2190 \ucd94\ub860\n}\nfetch(\"\/api\");                            \/\/ retries=3\nfetch(\"\/api\", 5);                         \/\/ retries=5\n\n\/\/ rest \ud30c\ub77c\ubbf8\ud130 \u2014 \uac00\ubcc0 \uc778\uc790\nfunction sum(...nums: number[]): number {\n  return nums.reduce((a, b) => a + b, 0);\n}\nsum(1, 2, 3, 4);                          \/\/ 10<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\uc635\uc158 vs \uae30\ubcf8\uac12.<\/strong> <code>query?: string<\/code> \ub294 \uc548 \uc8fc\uba74 <strong>undefined<\/strong> \uac00 \ub429\ub2c8\ub2e4. <code>retries = 3<\/code> \uc740 \uc548 \uc8fc\uba74 <strong>3<\/strong> \uc774 \ub429\ub2c8\ub2e4. \ub458\uc740 \ub2e4\ub985\ub2c8\ub2e4. &#8220;\uc548 \uc8fc\uba74 \uc5b4\ub5a4 \ub3d9\uc791&#8221; \uc774 \uba85\ud655\ud560 \ub550 \uae30\ubcf8\uac12 \ucabd\uc774 \ucf54\ub4dc\uac00 \uae54\ub054\ud574\uc694.<\/p>\n<\/div>\n\n<h2>void vs undefined \u2014 \ud5f7\uac08\ub9ac\ub294 \ub458<\/h2>\n\n<pre><code>\/\/ void \u2014 \"\uc774 \ud568\uc218\ub294 \uc758\ubbf8 \uc788\ub294 \ubc18\ud658\uc774 \uc5c6\ub2e4\"\nfunction log(msg: string): void {\n  console.log(msg);\n  \/\/ return \uc5c6\uc5b4\ub3c4 OK\n}\n\n\/\/ undefined \u2014 \"\uac12\uc73c\ub85c undefined \ub97c \uba85\uc2dc\uc801\uc73c\ub85c \ub3cc\ub824\uc900\ub2e4\"\nfunction find(name: string): User | undefined {\n  return users.find(u =&gt; u.name === name);\n  \/\/ \ubabb \ucc3e\uc73c\uba74 undefined \uba85\uc2dc\n}<\/code><\/pre>\n\n<p>\ud55c \uc904 \ucc28\uc774: <strong>void \ub294 &#8220;\uacb0\uacfc\ub97c \ubb34\uc2dc\ud574\ub77c&#8221;<\/strong>, <strong>undefined \ub294 &#8220;\uacb0\uacfc\ub85c undefined \uac00 \uac00\ub2a5\ud558\ub2e4&#8221;<\/strong>. void \ud568\uc218\ub97c \ubcc0\uc218\uc5d0 \ubc1b\uc73c\uba74 \uadf8 \uac12\uc740 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uac8c \uc57d\uc18d\uc774\uace0, undefined \ubc18\ud658\uc740 \uc0ac\uc6a9 \uc804 \uac80\uc0ac\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\ud568\uc218 \ud0c0\uc785\uc744 \ubcc0\uc218\uc5d0 \u2014 \ucf5c\ubc31\u00b7\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec<\/h2>\n\n<pre><code>\/\/ \ud568\uc218 \ud0c0\uc785 \ubcc4\uce6d\ntype BinaryOp = (a: number, b: number) =&gt; number;\n\nconst add: BinaryOp = (a, b) =&gt; a + b;      \/\/ \ub9e4\uac1c\ubcc0\uc218 \ud0c0\uc785 \ucd94\ub860\ub428\nconst sub: BinaryOp = (a, b) =&gt; a - b;\n\n\/\/ \ucf5c\ubc31 \uc778\uc790\uc5d0 \ud0c0\uc785\nfunction map&lt;T, U&gt;(arr: T[], fn: (item: T) =&gt; U): U[] {\n  return arr.map(fn);\n}\n\/\/ fn \uc758 \uc2dc\uadf8\ub2c8\ucc98\uac00 \uba85\ud655 \u2192 IDE \uac00 fn \ubcf8\ubb38 \uc791\uc131 \uc2dc \uc790\ub3d9\uc644\uc131<\/code><\/pre>\n\n<p>\ud568\uc218\ub97c \ub2e4\ub978 \ud568\uc218\uc758 \uc778\uc790\ub85c \ub118\uae38 \ub54c(\ucf5c\ubc31), \uadf8 \uc778\uc790 \ud568\uc218\uc758 \ud0c0\uc785\uc744 \uc801\uc5b4\ub450\uba74 \ud638\ucd9c\uc790 \ucabd\uc5d0\uc11c <strong>\ud654\uc0b4\ud45c \ud568\uc218 \ubcf8\ubb38\uc744 \uc4f8 \ub54c \uc790\ub3d9\uc644\uc131<\/strong>\uc774 \ub429\ub2c8\ub2e4. \uc774\uac8c \ub77c\uc774\ube0c\ub7ec\ub9ac API \uac00 \ud3b8\ud558\uac8c \ub290\uaef4\uc9c0\ub294 \ube44\uacb0\uc785\ub2c8\ub2e4.<\/p>\n\n<h2>overload \u2014 \uac19\uc740 \ud568\uc218, \ub2e4\ub978 \uc2dc\uadf8\ub2c8\ucc98<\/h2>\n\n<pre><code>\/\/ \uc2dc\uadf8\ub2c8\ucc98 \uc5ec\ub7ec \uc904 + \ubcf8\ubb38 \ud55c \ubc88\nfunction parse(input: string): string[];\nfunction parse(input: number): number;\nfunction parse(input: string | number): string[] | number {\n  if (typeof input === \"string\") return input.split(\",\");\n  return input * 2;\n}\n\nconst a = parse(\"a,b,c\");   \/\/ string[]\nconst b = parse(10);        \/\/ number<\/code><\/pre>\n\n<p>\ud638\ucd9c\ud558\ub294 \ucabd\uc5d0\uc11c <strong>\uc785\ub825 \ud0c0\uc785\uc5d0 \ub530\ub77c \ubc18\ud658 \ud0c0\uc785\uc774 \ub2ec\ub77c\uc9c0\uac8c<\/strong> \ub9cc\ub4e4\uace0 \uc2f6\uc744 \ub54c overload \ub97c \uc501\ub2c8\ub2e4. \ub2e4\ub9cc \ub108\ubb34 \uc790\uc8fc \uc4f0\uc9c0\ub294 \ub9c8\uc138\uc694 \u2014 \ubcf4\ud1b5 \uc720\ub2c8\uc628 + \uc870\uac74\ubd80 \ud0c0\uc785(12\ud3b8) \uc774 \ub354 \uae54\ub054\ud569\ub2c8\ub2e4.<\/p>\n\n<div class=\"databox\">\n  <p><strong>\uc2e4\uc804 \uc6b0\uc120\uc21c\uc704.<\/strong> \u2460 \ub9e4\uac1c\ubcc0\uc218 \ud56d\uc0c1 \ud45c\uae30 \u2192 \u2461 \uacf5\uac1c \ud568\uc218\ub294 \ubc18\ud658\ub3c4 \ud45c\uae30 \u2192 \u2462 \uc635\uc158\uc740 <code>?<\/code>, \uae30\ubcf8\uac12 \uc788\uc73c\uba74 <code>= value<\/code> \u2192 \u2463 \uac00\ubcc0 \uc778\uc790\ub294 <code>...args: T[]<\/code> \u2192 \u2464 overload \ub294 \uc815\ub9d0 \ud544\uc694\ud560 \ub54c\ub9cc. \uc774 \ub2e4\uc12f \uc904\uc774\uba74 \uc785\ubb38~\uc911\uae09\uc758 90% \ud568\uc218\uac00 \ub05d\ub0a9\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>4\ud3b8 \u2014 interface vs type<\/h3>\n  <p>\uac1d\uccb4\uc5d0 \ud0c0\uc785 \ubd99\uc774\ub294 \ub450 \ubc29\ubc95, \uc5b4\ub5bb\uac8c \ub2e4\ub974\uace0 \uc5b4\ub290 \ucabd\uc744 \uace8\ub77c\uc57c \ud560\uae4c.<\/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: 2\ud3b8 \uae30\ubcf8 \ud0c0\uc785 \u00b7 \ud604\uc7ac: <strong>3\ud3b8 (\uc785\ubb38)<\/strong> \u00b7 \ub2e4\uc74c \u2192 4\ud3b8 interface vs type \u00b7 \uc9c4\ud589: <strong>3\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98\u00b7\uc635\uc158\u00b7\uae30\ubcf8\uac12\u00b7rest\u00b7void\u00b7overload. 20\ud3b8 \uad50\uc7ac 3\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":261,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-482","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\/482","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=482"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/482\/revisions"}],"predecessor-version":[{"id":517,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/482\/revisions\/517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/261"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}