{"id":13352,"date":"2023-01-27T16:22:01","date_gmt":"2023-01-27T07:22:01","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=13352"},"modified":"2023-01-28T10:58:53","modified_gmt":"2023-01-28T01:58:53","slug":"%ed%81%b4%eb%9e%98%ec%8a%a4-%ec%9d%b4%eb%a6%84%ec%9d%84-%ec%9d%b8%ec%9e%90%eb%a1%9c-%eb%b0%9b%ec%95%84-%ea%b0%9d%ec%b2%b4%eb%a5%bc-%ec%83%9d%ec%84%b1%ed%95%98%eb%8a%94-%ed%95%a8%ec%88%98","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=13352","title":{"rendered":"TypeScript\uc758 \uce94\ub514\ucf54\ub4dc"},"content":{"rendered":"

\"\"<\/p>\n

\ud074\ub798\uc2a4 \uc774\ub984\uc73c\ub85c \ud574\ub2f9 \ud074\ub798\uc2a4\uc758 \uc778\uc2a4\ud134\uc2a4 \uc0dd\uc131<\/h3>\n

TypeScript\uc5d0\uc11c \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc778\uc790\ub85c \ubc1b\uc544 \ud574\ub2f9 \ud074\ub798\uc2a4\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc131\ud574 \uc8fc\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n

\r\nfunction create<T>(ClassName: { new(z: number): T }, i:number): T {\r\n    return new ClassName(i);\r\n}\r\n<\/pre>\n
\uc704\uc758 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nclass CLZ {\r\n    i: number;\r\n    constructor(i: number) {\r\n        this.i = i;\r\n    }\r\n}\r\n\r\nconst o = create(CLZ, 100);\r\nconsole.log(o.i);\r\n<\/pre>\n
\uc2e4\ud589 \uacb0\uacfc\ub294 100<\/p>\n
\uc5b4\ub5a4 \ud568\uc218\uc758 \ubc18\ud658\uac12 \ud0c0\uc785 \uc5bb\uae30<\/h3>\n
\uc5b4\ub5a4 \ud568\uc218\uac00 \uc788\uc744 \ub54c.. \uadf8 \ud568\uc218\uc758 \ubc18\ud658\uac12\uc5d0 \ub300\ud55c \ud0c0\uc785\uc744 \uc5bb\uae30 \uc704\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nfunction func(x: number): string {\r\n    return `value: ${x}`;\r\n}\r\n\r\ntype K = ReturnType<typeof func>\r\n<\/pre>\n
\uc704\uc758 K \ud0c0\uc785 \ubcc4\uce6d\uc774 func \ud568\uc218\uc758 \ubc18\ud658\uac12\uc5d0 \ub300\ud55c \ud0c0\uc785\uc778\ub370.. \uacb0\uacfc\ub294 string\uc785\ub2c8\ub2e4.<\/p>\n
\ubc30\uc5f4 \uad6c\uc131 \uc694\uc18c\uc758 \ud0c0\uc785 \uc5bb\uae30<\/h3>\n
\r\nconst MyArray = [\r\n  { name: \"Alice\", age: 15 },\r\n  { name: \"Bob\", age: 23 },\r\n  { name: \"Eve\", age: 38 }\r\n];\r\n\r\ntype Person = typeof MyArray[number];\r\n<\/pre>\n
\uc0ac\uc2e4 \uc704\uc758 \ucf54\ub4dc \uc911 7\ubc88\uc9f8\uc758 number\ub97c \uc9c0\uc815\ud574 \ubc30\uc5f4\uc758 \uc778\ub371\uc2a4 \uac12\uc744 \uc9c0\uc815\ud588\ub294\ub370, \uc774 \uacf3\uc5d0 \uc5b4\ub5a4 \uc22b\uc790\uac12\uc774\ub4e0 \uc9c0\uc815\uc774 \uac00\ub2a5\ud55c\ub370.. \uc774 \ubd80\ubd84\uc774 \uc560\ub9e4\ubaa8\ud638\ud574\uc11c \uadf8\ub0e5 number\ub85c \uc9c0\uc815\ud558\ub294 \uac83\uc73c\ub85c \uc774\ud574\ud569\ub2c8\ub2e4. \uc5ec\ud2bc \uc704 \ucf54\ub4dc\uc5d0\uc11c Person\uc758 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ntype Person = { age: number, name: string };\r\n<\/pre>\n
\ucd94\ub860\ub41c \ud0c0\uc785 \uc5bb\uae30<\/h3>\n
TypeScript\ub294 \ud0c0\uc785\uc744 \uc790\ub3d9\uc73c\ub85c \ucd94\ub860\ud558\uac8c \ub418\ub294\ub370 \ucd94\ub860\ub41c \ud0c0\uc785\uc744 \uc5bb\uae30 \uc704\ud574 infer\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \ubc30\uc5f4\uc744 \uad6c\uc131\ud558\ub294 \uc694\uc18c\uc758 \ud0c0\uc785\uc744 \ucd94\ub860\ud558\uace0\uc790 \ud558\ub294 \uc608\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ntype Flatten<T> = T extends Array<infer E> ? E : T \r\ntype Str = Flatten<string[]> \/\/ Str\uc758 \uac12\uc740 string \ud0c0\uc785\r\ntype Num = Flatten<number> \/\/ Num\uc758 \uac12\uc740 number \ud0c0\uc785\r\n\/\/ \uc704\uc758 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \ub3d9\uc77c\ud568 : type Flatten<T> = T extends unknown[] ? T[number] : T\r\n<\/pre>\n
\ub2e4\ub978 \uc608\ub85c \uc5b4\ub5a4 \ud568\uc218\uc758 \uacb0\uacfc\uac12\uc758 \ud0c0\uc785\uc5d0 \ub300\ud574 \ucd94\ub860\uc774 \uac00\ub2a5\ud558\ub2e4\uba74.. \ucd94\ub860\ub41c \ud0c0\uc785\uc744 \uc5bb\ub294 \uc608\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ntype GetReturnType<T> = T extends (...args: never[]) => infer R ? R : never\r\ntype R1 = GetReturnType<() => number> \/\/ R1 \uac12\uc740 number \ud0c0\uc785\r\ntype R2 = GetReturnType<(x: string) => string> \/\/ R2 \uac12\uc740 string \ud0c0\uc785\r\ntype R3 = GetReturnType<(a: boolean, b: boolean) => boolean[]> \/\/ R3 \uac12\uc740 boolean[] \ud0c0\uc785\r\nfunction func(x: number): string { return `value: ${x}`; }\r\ntype R4 = GetReturnType<typeof func> \/\/ R4 \uac12\uc740 string \ud0c0\uc785\r\n<\/pre>\n
\uc0dd\uc131\uc790\uc758 \uc778\uc790\ub97c \ud544\ub4dc\ud654 \uc2dc\ud0a4\uae30(Parameter Properties)<\/h3>\n
\ud074\ub798\uc2a4\uc758 \ud544\ub4dc\ub97c \uc815\uc758\ud558\ub294 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub294 \uac83\uc740 \ub54c\ub85c \uc9c0\ub8e8\ud55c\ub370, \ud2b9\ud788\ub098 \uc0dd\uc131\uc790\ub85c \ucd08\uae30\ud654\ud560 \uac12\uc744 \ubc1b\uc544 \ud544\ub4dc\ub4e4\uc758 \uac12\uc744 \uc124\uc815\ud560\ub54c \uadf8\ub807\uc2b5\ub2c8\ub2e4. TypeScript\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc774\ub7ec\ud55c \uc9c0\ub8e8\ud568\uc744 \uc904\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n
\r\nclass Params {\r\n  constructor(\r\n    public readonly x: number,\r\n    protected y: number,\r\n    private z: number\r\n  ) {}\r\n}\r\n\r\nconst a = new Params(1,2,3) \/\/ x, y, z\ub294 \uac01\uac01 1, 2, 3\uc73c\ub85c \uc124\uc815\ub428\r\nconsole.log(a.x)\r\nconsole.log(a.y) \/\/ ERROR\r\nconsole.log(a.z) \/\/ ERROR\r\na.x = 100 \/\/ ERROR\r\n<\/pre>\n
\uc778\ub371\uc2a4 \ud504\ub85c\ud37c\ud2f0<\/h3>\n
\r\ninterface User {\r\n    name: string,\r\n    [grade: number]: string,\r\n    [key: string]: string,\r\n}\r\n\r\nconst user: User = {\r\n    name: \"Dip2K\",\r\n\r\n    \/\/ [grade: number]: string\ub85c \uc778\ud574 \uac00\ub2a5\ud568\r\n    0: \"A\",\r\n    2: \"B\",\r\n    5: \"C\",\r\n    \r\n    \/\/ [key: string]: string\ub85c \uc778\ud574 \uac00\ub2a5\ud568\r\n    asdf: \"adsf\",\r\n    axcv: \"scvg\",\r\n}\r\n\r\nconsole.log(user[2], user.asdf)\r\n<\/pre>\n
\ud0c0\uc785 \ub3c4\uad6c : Partial<\/h3>\n
Partial\uc740 \ud0c0\uc785\uc744 \uad6c\uc131\ud558\ub294 \ud56d\ubaa9 \uc911 \uc77c\ubd80\ub9cc\uc73c\ub85c \uad6c\uc131\ub41c \ud0c0\uc785\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc774\ud574\ud55c\ub2e4\uba74 TypeScript \ud504\ub85c\uadf8\ub798\uba38\ub85c\uc368 \uc911\uae09 \uc774\uc0c1\uc758 \uc218\uc900\uc785\ub2c8\ub2e4.<\/p>\n
\r\ninterface Todo {\r\n  title: string;\r\n  description: string;\r\n}\r\n \r\nfunction updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {\r\n  return { ...todo, ...fieldsToUpdate };\r\n}\r\n \r\nconst todo1 = {\r\n  title: \"organize desk\",\r\n  description: \"clear clutter\",\r\n};\r\n \r\nconst todo2 = updateTodo(todo1, {\r\n  description: \"throw out trash\",\r\n});\r\n\r\nconsole.log(todo2)\r\n<\/pre>\n
todo2\ub97c \ucd9c\ub825\ud574\ubcf4\uba74 {title: ‘organize desk’, description: ‘throw out trash’} \uc785\ub2c8\ub2e4.<\/p>\n
\ub9ac\ud130\ub110 \ud0c0\uc785\uc73c\ub85c \ubcc0\uacbd\ud558\uae30<\/h3>\n
handleRequest\uc758 \ub450\ubc88\uc9f8 \uc778\uc790\ub294 “GET” | “POST” \ud0c0\uc785\uc774\ubbc0\ub85c \uc544\ub798\uc758 \ucf54\ub4dc\uc5d0\uc11c req.method\ub294 \uc774 \uc720\ub2c8\uc628 \ud0c0\uc785\uc744 \ucda9\uc871\uc2dc\ud0a4\uc9c0 \ubabb\ud55c\ub2e4\uace0 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ud574\uc11d\ud569\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \ud574\uacb0\ucc45\uc740 \uc544\ub798 \uc8fc\uc11d\uc73c\ub85c \ub9c9\uc544 \ub193\uc740 \ucf54\ub4dc 2\uac00\uc9c0\uc785\ub2c8\ub2e4.<\/p>\n
\r\nconst req = { url: \"https:\/\/example.com\", method: \"GET\" }\r\n\/\/ SOLUTION I  : const req = { url: \"https:\/\/example.com\", method: \"GET\" } as const\r\n\/\/ SOLUTION II : const req = { url: \"https:\/\/example.com\", method: \"GET\" as \"GET\"}\r\nhandleRequest(req.url, req.method)\r\n\r\nfunction handleRequest(url: string, req: \"GET\" | \"POST\") {\r\n  \/\/ .\r\n}\r\n<\/pre>\n
any<\/h3>\n
\uc5b4\ub5a4 \ud0c0\uc785\uc758 \uac12\uc774\ub4e0 \ud560\ub2f9\uc744 \ud5c8\uc6a9\ud558\ub294 \ud0c0\uc785\uc73c\ub85c TypeScript\uc758 \ud0c0\uc785 \uc2dc\uc2a4\ud15c\uc744 \ubb34\ub825\ud654\uc2dc\ud0a4\ub294 \ud0c0\uc785\uc785\ub2c8\ub2e4. \ubd80\ub4dd\uc774\ud55c \uacbd\uc6b0 \uc0ac\uc6a9\ud558\ub418 \uc810\uc9c4\uc801\uc73c\ub85c \uc774 \ud0c0\uc785\uc758 \uc0ac\uc6a9\uc744 \uc81c\uac70\ud574 \ub098\uac00\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ubaa8\ub450 \uc815\uc0c1\uc801\uc73c\ub85c \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/p>\n
\r\nlet a: any = 10\r\na = \"Hello\"\r\na.TEST()\r\nlet b: number = a\r\nconsole.log(a, b)\r\n<\/pre>\n
unknown<\/h3>\n
\uc5b4\ub5a4 \ud0c0\uc785\uc758 \uac12\uc774\ub4e0 \ud560\ub2f9\uc744 \ud5c8\uc6a9\ud558\uc9c0\ub9cc \ud0c0\uc785\uc774 \uc9c0\uc815\ub41c \ub2e4\ub978 \ud0c0\uc785\uc5d0 \ud560\ub2f9\ub4f1\uacfc \uac19\uc740 \ud63c\uc6a9\uc2dc unknwon \ud0c0\uc785 \ubcc0\uc218\uc758 \ud0c0\uc785\uc744 as \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uba85\ud655\ud788 \uba85\uc2dc\ud574\uc918\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\r\nlet c: unknown = \"Hello\"\r\n\/\/ [ERROR] c.length \r\nif(typeof c === \"string\") {\r\n  c.length\r\n}\r\nc = 10\r\nlet d: number = c as number\r\n<\/pre>\n
never<\/h3>\n
\uc5b4\ub5a4 \ud0c0\uc785\uc758 \uac12\ub3c4 \ud560\ub2f9\ub418\ub294 \uac83\uc744 \ud5c8\uc6a9\ud558\uc9c0 \uc54a\ub294 \ud0c0\uc785\uc785\ub2c8\ub2e4.<\/p>\n
\r\nlet e: never\r\n\/\/ [ERROR] let f: never = 10\r\n<\/pre>\n
\ud65c\uc6a9\uc608\ub85c 2\uac00\uc9c0\ub97c \uc0b4\ud3b4\ubcfc \uc218 \uc788\ub294\ub370, \uccab\ubc88\uc9f8\ub294 \uc2e4\ud589\ub420 \uc218 \uc5c6\ub294 \ud568\uc218\uc5d0 \ub300\ud55c \ubc18\ud658\uac12\uc744 \uc9c0\uc815\ud560\ub54c\ub85c \ub2e4\uc74c \ucf54\ub4dc\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nconst foo = (name: string): never => {\r\n  throw new Error(\"Not Implemented\")\r\n}\r\n<\/pre>\n
\ub610 \ud558\ub098\ub294 generic \ud0c0\uc785\uc73c\ub85c \uc9c0\uc815\ub418\ub294 \ud0c0\uc785\uc758 \uc0ac\uc6a9\uc744 \ub9c9\uae30 \uc704\ud55c \uc6a9\ub3c4\uc785\ub2c8\ub2e4.<\/p>\n
\r\ntype NotString<T> = T extends string ? never : T\r\n\/\/ [ERROR] let f: NotString<string> = \"Hello\"\r\nlet g: NotString<boolean> = true\r\n<\/pre>\n
\ubcc0\uacbd\ud560 \uc218 \uc5c6\ub294 \ubc30\uc5f4 \ud0c0\uc785 \ub9cc\ub4e4\uae30<\/h3>\n
\ubc30\uc5f4\uc758 \uad6c\uc131 \uac12\ub4e4\uc744 \ubcc0\uacbd\ud558\uac70\ub098 \uc0ad\uc81c\ud560 \uc218 \uc5c6\ub3c4\ub85d \ud558\uae30 \uc704\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nconst a = [1, 2, 3]\r\na.push(4)\r\n\r\nconst b: readonly number[] = [1, 2 ,3]\r\nb.push(4) \/\/ ERROR\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
\ud074\ub798\uc2a4 \uc774\ub984\uc73c\ub85c \ud574\ub2f9 \ud074\ub798\uc2a4\uc758 \uc778\uc2a4\ud134\uc2a4 \uc0dd\uc131 TypeScript\uc5d0\uc11c \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc778\uc790\ub85c \ubc1b\uc544 \ud574\ub2f9 \ud074\ub798\uc2a4\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc131\ud574 \uc8fc\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. function create<T>(ClassName: { new(z: number): T }, i:number): T { return new ClassName(i); } \uc704\uc758 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. class CLZ { i: number; constructor(i: number) { this.i = i; } } const o = create(CLZ, 100); … <\/p>\n
\ub354 \ubcf4\uae30 “TypeScript\uc758 \uce94\ub514\ucf54\ub4dc”<\/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":[88],"tags":[],"class_list":["post-13352","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13352","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=13352"}],"version-history":[{"count":26,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13352\/revisions"}],"predecessor-version":[{"id":13414,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13352\/revisions\/13414"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13352"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}