{"id":17092,"date":"2026-08-04T21:42:51","date_gmt":"2026-08-04T12:42:51","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=17092"},"modified":"2026-08-04T21:51:19","modified_gmt":"2026-08-04T12:51:19","slug":"typescript-%ed%95%a8%ec%88%98-%ec%98%a4%eb%b2%84%eb%a1%9c%eb%94%a9%ec%9d%84-%ec%8a%a4%eb%a7%88%ed%8a%b8%ed%95%98%ea%b2%8c-%eb%8c%80%ec%b2%b4%ed%95%98%eb%8a%94-%eb%a7%a4%ea%b0%9c%eb%b3%80%ec%88%98","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=17092","title":{"rendered":"TypeScript, \ud568\uc218 \uc624\ubc84\ub85c\ub529\uc744 \uc2a4\ub9c8\ud2b8\ud558\uac8c \ub300\uccb4\ud558\ub294 &#8220;\ub9e4\uac1c\ubcc0\uc218 \ub3d9\uc801 \ucd94\ub860&#8221;"},"content":{"rendered":"<p>\ud558\ub098\uc774 \ud568\uc218\uc5d0 \ub300\ud574\uc11c \uccab\ubc88\uc9f8\ub85c \uc785\ub825\ubc1b\ub294 \uc778\uc790\uc758 \uac12\uc5d0 \ub530\ub77c \uc774\ud6c4 \uc778\uc790\uc758 \ud0c0\uc785\uc744 \uacb0\uc815\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \ud568\uc218 \uc624\ubc84\ub85c\ub529\uc774 \uc544\ub2cc TypeScript \ubcf8\uc5f0\uc758 \ud0c0\uc785 \uae30\ub2a5\uc744 \uc774\uc6a9\ud558\ub294 \ubc29\ubc95\uc73c\ub85c \ud568\uc218 \uc624\ubc84\ub85c\ub529\ubcf4\ub2e4 \ub354\uc6b1 \uc791\uc131\ud558\uae30 \uc27d\uace0 \ub611\ub611\ud569\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 emit\ub77c\ub294 \ud568\uc218\ub97c \ub2e4\uc74c\ucc98\ub7fc \uc815\uc758\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\ntype EventMap = {\r\n  click: { x: number; y: number };\r\n  hover: { elementId: string };\r\n  keyPress: { key: string; code: number };\r\n};\r\n\r\n\/\/ Key\ub97c \uc81c\ub124\ub9ad\uc73c\ub85c \ubc1b\uc544 EventMap[Key]\ub97c Payload \ud0c0\uc785\uc73c\ub85c \uc790\ub3d9 \ucd94\ub860\ud569\ub2c8\ub2e4.\r\nfunction emit<K extends keyof EventMap>(eventName: K, payload: EventMap[K]) {\r\n  console.log(`Event: ${eventName}`, payload);\r\n}\r\n<\/pre>\n<p>emit\uc758 \uccab\ubc88\uc9f8 \uac12\uc5d0 \ub530\ub77c \ub450\ubc88\uc9f8 \uc778\uc790\uc758 \ud0c0\uc785\uc774 \ub2e4\ub974\uac8c \uacb0\uc815\ub429\ub2c8\ub2e4. \ud574\ub2f9 \ud0c0\uc785\ub4e4\uc740 \uc704\uc758 EventMap \ud0c0\uc785\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ub2e4\uc74c\ucc98\ub7fc emit \ud568\uc218\ub97c \uc774\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nemit('click', { x: 10, y: 20 });        \/\/ \u2705 \uc815\uc0c1 \uc791\ub3d9\r\nemit('click', { elementId: 'btn' });    \/\/ \u274c \ud0c0\uc785 \uc5d0\ub7ec! click\uc740 x, y\uac00 \ud544\uc218\uc785\ub2c8\ub2e4.\r\nemit('hover', { elementId: 'header' }); \/\/ \u2705 \uc815\uc0c1 \uc791\ub3d9 (elementId \uc624\ud0c0 \uc2dc \uac10\uc9c0)\r\n<\/pre>\n<p>\uadf8\ub7ec\ub098 emit \ud568\uc218 \uad6c\ud604\ubd80\uc5d0\uc11c \uccab\ubc88\uc9f8 \uc778\uc790\uc778 eventName\uc758 \uac12\uc5d0 \ub530\ub77c payload\uc758 \ud0c0\uc785\uc744 \uacb0\uc815\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 eventName\uc774 &#8216;click&#8217;\uc774\ub77c\uba74 payload.x\uac00 \uac00\ub2a5\ud574\uc57c \ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc704\uc758 \ubc29\ubc95\uc73c\ub85c\ub294 \uc548\ub429\ub2c8\ub2e4. \ub2e4\ub978 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc73c\uba70 TypeScript \ucf54\ub4dc\ub85c\uc368 \ubcf4\ub2e4 \ub354 \uc27d\uace0 \uc9c1\uad00\uc801\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\ntype EventMap =\r\n  | {\r\n    eventName: \"click\";\r\n    payload: { x: number; y: number };\r\n  }\r\n  | {\r\n    eventName: \"hover\";\r\n    payload: { elementId: string };\r\n  }\r\n  | {\r\n    eventName: \"keyPress\";\r\n    payload: { key: string; code: number };\r\n  };\r\n\r\nfunction emit(event: EventMap) {\r\n  if (event.eventName === \"click\") {\r\n    event.payload.x; \/\/ \u2705\r\n    event.payload.y;\r\n  }\r\n\r\n  if (event.eventName === \"hover\") {\r\n    event.payload.elementId; \/\/ \u2705\r\n  }\r\n}\r\n\r\nemit({ eventName: 'click', payload: { x: 10, y: 20 } });\r\n<\/pre>\n<p>\uacb0\uad6d \ud568\uc218 \uc624\ubc84\ub85c\ub529\uc744 \uc2a4\ub9c8\ud2b8\ud558\uac8c \ub300\uccb4\ud558\ub294 &#8220;\ub9e4\uac1c\ubcc0\uc218 \ub3d9\uc801 \ucd94\ub860&#8221; \ubc29\uc2dd\uc740 \ud06c\uac8c \uc758\ubbf8\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud558\ub098\uc774 \ud568\uc218\uc5d0 \ub300\ud574\uc11c \uccab\ubc88\uc9f8\ub85c \uc785\ub825\ubc1b\ub294 \uc778\uc790\uc758 \uac12\uc5d0 \ub530\ub77c \uc774\ud6c4 \uc778\uc790\uc758 \ud0c0\uc785\uc744 \uacb0\uc815\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \ud568\uc218 \uc624\ubc84\ub85c\ub529\uc774 \uc544\ub2cc TypeScript \ubcf8\uc5f0\uc758 \ud0c0\uc785 \uae30\ub2a5\uc744 \uc774\uc6a9\ud558\ub294 \ubc29\ubc95\uc73c\ub85c \ud568\uc218 \uc624\ubc84\ub85c\ub529\ubcf4\ub2e4 \ub354\uc6b1 \uc791\uc131\ud558\uae30 \uc27d\uace0 \ub611\ub611\ud569\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 emit\ub77c\ub294 \ud568\uc218\ub97c \ub2e4\uc74c\ucc98\ub7fc \uc815\uc758\ud569\ub2c8\ub2e4. type EventMap = { click: { x: number; y: number }; hover: { elementId: string }; keyPress: { key: string; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=17092\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;TypeScript, \ud568\uc218 \uc624\ubc84\ub85c\ub529\uc744 \uc2a4\ub9c8\ud2b8\ud558\uac8c \ub300\uccb4\ud558\ub294 &#8220;\ub9e4\uac1c\ubcc0\uc218 \ub3d9\uc801 \ucd94\ub860&#8221;&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[157],"tags":[],"class_list":["post-17092","post","type-post","status-publish","format-standard","hentry","category-typescript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17092"}],"version-history":[{"count":3,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17092\/revisions"}],"predecessor-version":[{"id":17094,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17092\/revisions\/17094"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17092"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}