[{"data":1,"prerenderedAt":1592},["ShallowReactive",2],{"blogs":3},[4],{"id":5,"title":6,"body":7,"date":1578,"description":1579,"extension":1580,"meta":1581,"navigation":220,"path":1582,"seo":1583,"stem":1584,"tags":1585,"__hash__":1591},"blog\u002Fblog\u002Fadvanced-typescript-patterns.md","Advanced TypeScript Patterns Every Developer Should Know",{"type":8,"value":9,"toc":1556},"minimark",[10,15,22,27,56,59,62,67,100,103,106,110,113,276,280,475,478,481,911,914,917,981,985,1022,1026,1057,1061,1064,1413,1417,1420,1428,1432,1492,1496,1499,1513,1522,1524,1528,1552],[11,12,14],"h1",{"id":13},"advanced-typescript-patterns-every-developer-should-know","Advanced TypeScript Patterns Every Developer Should Know šŸš€",[16,17,18],"blockquote",{},[19,20,21],"p",{},"\"Make impossible states impossible\" - TypeScript's type system at its finest.",[23,24,26],"h2",{"id":25},"table-of-contents","Table of Contents",[28,29,30,38,44,50],"ol",{},[31,32,33],"li",{},[34,35,37],"a",{"href":36},"#introduction","Introduction",[31,39,40],{},[34,41,43],{"href":42},"#advanced-generic-patterns","Advanced Generic Patterns",[31,45,46],{},[34,47,49],{"href":48},"#practical-examples","Practical Examples",[31,51,52],{},[34,53,55],{"href":54},"#performance-considerations","Performance Considerations",[23,57,37],{"id":58},"introduction",[19,60,61],{},"TypeScript has revolutionized how we write JavaScript applications. In this comprehensive guide, we'll explore advanced patterns that make TypeScript a powerful tool for building robust applications.",[63,64,66],"h3",{"id":65},"why-advanced-patterns-matter","Why Advanced Patterns Matter",[28,68,69,87],{},[31,70,71,75],{},[72,73,74],"strong",{},"Type Safety",[76,77,78,81,84],"ul",{},[31,79,80],{},"Catch errors at compile time",[31,82,83],{},"Better IDE support",[31,85,86],{},"Self-documenting code",[31,88,89,92],{},[72,90,91],{},"Code Reusability",[76,93,94,97],{},[31,95,96],{},"DRY principles",[31,98,99],{},"Maintainable codebase",[101,102],"hr",{},[23,104,43],{"id":105},"advanced-generic-patterns",[63,107,109],{"id":108},"_1-conditional-types","1. Conditional Types",[19,111,112],{},"Here's an example of a powerful conditional type:",[114,115,120],"pre",{"className":116,"code":117,"language":118,"meta":119,"style":119},"language-typescript shiki shiki-themes material-theme-lighter github-light github-dark","type IsArray\u003CT> = T extends any[] ? true : false\ntype StringOrNumber\u003CT> = T extends string | number ? T : never\n\n\u002F\u002F Usage\ntype Test1 = IsArray\u003Cstring[]> \u002F\u002F true\ntype Test2 = IsArray\u003Cnumber> \u002F\u002F false\n","typescript","",[121,122,123,176,215,222,229,254],"code",{"__ignoreMap":119},[124,125,128,132,136,140,143,146,150,153,156,160,164,167,170,173],"span",{"class":126,"line":127},"line",1,[124,129,131],{"class":130},"sbsja","type",[124,133,135],{"class":134},"sbgvK"," IsArray",[124,137,139],{"class":138},"sP7_E","\u003C",[124,141,142],{"class":134},"T",[124,144,145],{"class":138},">",[124,147,149],{"class":148},"smGrS"," =",[124,151,152],{"class":134}," T",[124,154,155],{"class":130}," extends",[124,157,159],{"class":158},"sZMiF"," any",[124,161,163],{"class":162},"su5hD","[] ",[124,165,166],{"class":148},"?",[124,168,169],{"class":158}," true",[124,171,172],{"class":148}," :",[124,174,175],{"class":158}," false\n",[124,177,179,181,184,186,188,190,192,194,196,199,202,205,208,210,212],{"class":126,"line":178},2,[124,180,131],{"class":130},[124,182,183],{"class":134}," StringOrNumber",[124,185,139],{"class":138},[124,187,142],{"class":134},[124,189,145],{"class":138},[124,191,149],{"class":148},[124,193,152],{"class":134},[124,195,155],{"class":130},[124,197,198],{"class":158}," string",[124,200,201],{"class":148}," |",[124,203,204],{"class":158}," number",[124,206,207],{"class":148}," ?",[124,209,152],{"class":134},[124,211,172],{"class":148},[124,213,214],{"class":158}," never\n",[124,216,218],{"class":126,"line":217},3,[124,219,221],{"emptyLinePlaceholder":220},true,"\n",[124,223,225],{"class":126,"line":224},4,[124,226,228],{"class":227},"sutJx","\u002F\u002F Usage\n",[124,230,232,234,237,239,241,243,246,249,251],{"class":126,"line":231},5,[124,233,131],{"class":130},[124,235,236],{"class":134}," Test1",[124,238,149],{"class":148},[124,240,135],{"class":134},[124,242,139],{"class":138},[124,244,245],{"class":158},"string",[124,247,248],{"class":162},"[]",[124,250,145],{"class":138},[124,252,253],{"class":227}," \u002F\u002F true\n",[124,255,257,259,262,264,266,268,271,273],{"class":126,"line":256},6,[124,258,131],{"class":130},[124,260,261],{"class":134}," Test2",[124,263,149],{"class":148},[124,265,135],{"class":134},[124,267,139],{"class":138},[124,269,270],{"class":158},"number",[124,272,145],{"class":138},[124,274,275],{"class":227}," \u002F\u002F false\n",[63,277,279],{"id":278},"_2-mapped-types-with-key-remapping","2. Mapped Types with Key Remapping",[114,281,283],{"className":116,"code":282,"language":118,"meta":119,"style":119},"type Getters\u003CT> = {\n [K in keyof T as `get${Capitalize\u003Cstring & K>}`]: () => T[K]\n}\n\ninterface Person {\n name: string\n age: number\n}\n\ntype PersonGetters = Getters\u003CPerson>\n\u002F\u002F Results in:\n\u002F\u002F {\n\u002F\u002F getName: () => string;\n\u002F\u002F getAge: () => number;\n\u002F\u002F }\n",[121,284,285,303,374,379,383,393,404,415,420,425,445,451,457,463,469],{"__ignoreMap":119},[124,286,287,289,292,294,296,298,300],{"class":126,"line":127},[124,288,131],{"class":130},[124,290,291],{"class":134}," Getters",[124,293,139],{"class":138},[124,295,142],{"class":134},[124,297,145],{"class":138},[124,299,149],{"class":148},[124,301,302],{"class":138}," {\n",[124,304,305,308,311,314,317,319,323,327,331,334,337,339,341,344,347,349,352,355,358,361,364,366,369,371],{"class":126,"line":178},[124,306,307],{"class":162}," [",[124,309,310],{"class":134},"K",[124,312,313],{"class":148}," in",[124,315,316],{"class":148}," keyof",[124,318,152],{"class":134},[124,320,322],{"class":321},"sVHd0"," as",[124,324,326],{"class":325},"sjJ54"," `",[124,328,330],{"class":329},"s_sjI","get",[124,332,333],{"class":325},"${",[124,335,336],{"class":134},"Capitalize",[124,338,139],{"class":325},[124,340,245],{"class":158},[124,342,343],{"class":148}," &",[124,345,346],{"class":134}," K",[124,348,145],{"class":325},[124,350,351],{"class":325},"}`",[124,353,354],{"class":162},"]",[124,356,357],{"class":148},":",[124,359,360],{"class":138}," ()",[124,362,363],{"class":130}," =>",[124,365,152],{"class":134},[124,367,368],{"class":162},"[",[124,370,310],{"class":134},[124,372,373],{"class":162},"]\n",[124,375,376],{"class":126,"line":217},[124,377,378],{"class":138},"}\n",[124,380,381],{"class":126,"line":224},[124,382,221],{"emptyLinePlaceholder":220},[124,384,385,388,391],{"class":126,"line":231},[124,386,387],{"class":130},"interface",[124,389,390],{"class":134}," Person",[124,392,302],{"class":138},[124,394,395,399,401],{"class":126,"line":256},[124,396,398],{"class":397},"sucvu"," name",[124,400,357],{"class":148},[124,402,403],{"class":158}," string\n",[124,405,407,410,412],{"class":126,"line":406},7,[124,408,409],{"class":397}," age",[124,411,357],{"class":148},[124,413,414],{"class":158}," number\n",[124,416,418],{"class":126,"line":417},8,[124,419,378],{"class":138},[124,421,423],{"class":126,"line":422},9,[124,424,221],{"emptyLinePlaceholder":220},[124,426,428,430,433,435,437,439,442],{"class":126,"line":427},10,[124,429,131],{"class":130},[124,431,432],{"class":134}," PersonGetters",[124,434,149],{"class":148},[124,436,291],{"class":134},[124,438,139],{"class":138},[124,440,441],{"class":134},"Person",[124,443,444],{"class":138},">\n",[124,446,448],{"class":126,"line":447},11,[124,449,450],{"class":227},"\u002F\u002F Results in:\n",[124,452,454],{"class":126,"line":453},12,[124,455,456],{"class":227},"\u002F\u002F {\n",[124,458,460],{"class":126,"line":459},13,[124,461,462],{"class":227},"\u002F\u002F getName: () => string;\n",[124,464,466],{"class":126,"line":465},14,[124,467,468],{"class":227},"\u002F\u002F getAge: () => number;\n",[124,470,472],{"class":126,"line":471},15,[124,473,474],{"class":227},"\u002F\u002F }\n",[23,476,49],{"id":477},"practical-examples",[19,479,480],{},"Let's look at a real-world example of a type-safe event emitter:",[114,482,484],{"className":116,"code":483,"language":118,"meta":119,"style":119},"interface EventMap {\n userLoggedIn: { userId: string; timestamp: number }\n userLoggedOut: { timestamp: number }\n error: { code: number; message: string }\n}\n\nclass TypeSafeEventEmitter {\n private listeners: Partial\u003C{\n [K in keyof EventMap]: ((data: EventMap[K]) => void)[]\n }> = {}\n\n on\u003CK extends keyof EventMap>(event: K, callback: (data: EventMap[K]) => void) {\n if (!this.listeners[event]) {\n this.listeners[event] = []\n }\n this.listeners[event]?.push(callback)\n }\n\n emit\u003CK extends keyof EventMap>(event: K, data: EventMap[K]) {\n this.listeners[event]?.forEach(callback => callback(data))\n }\n}\n",[121,485,486,495,525,542,569,573,577,587,603,651,661,665,724,755,777,782,812,818,823,866,901,906],{"__ignoreMap":119},[124,487,488,490,493],{"class":126,"line":127},[124,489,387],{"class":130},[124,491,492],{"class":134}," EventMap",[124,494,302],{"class":138},[124,496,497,500,502,505,508,510,512,515,518,520,522],{"class":126,"line":178},[124,498,499],{"class":397}," userLoggedIn",[124,501,357],{"class":148},[124,503,504],{"class":138}," {",[124,506,507],{"class":397}," userId",[124,509,357],{"class":148},[124,511,198],{"class":158},[124,513,514],{"class":138},";",[124,516,517],{"class":397}," timestamp",[124,519,357],{"class":148},[124,521,204],{"class":158},[124,523,524],{"class":138}," }\n",[124,526,527,530,532,534,536,538,540],{"class":126,"line":217},[124,528,529],{"class":397}," userLoggedOut",[124,531,357],{"class":148},[124,533,504],{"class":138},[124,535,517],{"class":397},[124,537,357],{"class":148},[124,539,204],{"class":158},[124,541,524],{"class":138},[124,543,544,547,549,551,554,556,558,560,563,565,567],{"class":126,"line":224},[124,545,546],{"class":397}," error",[124,548,357],{"class":148},[124,550,504],{"class":138},[124,552,553],{"class":397}," code",[124,555,357],{"class":148},[124,557,204],{"class":158},[124,559,514],{"class":138},[124,561,562],{"class":397}," message",[124,564,357],{"class":148},[124,566,198],{"class":158},[124,568,524],{"class":138},[124,570,571],{"class":126,"line":231},[124,572,378],{"class":138},[124,574,575],{"class":126,"line":256},[124,576,221],{"emptyLinePlaceholder":220},[124,578,579,582,585],{"class":126,"line":406},[124,580,581],{"class":130},"class",[124,583,584],{"class":134}," TypeSafeEventEmitter",[124,586,302],{"class":138},[124,588,589,592,595,597,600],{"class":126,"line":417},[124,590,591],{"class":130}," private",[124,593,594],{"class":397}," listeners",[124,596,357],{"class":148},[124,598,599],{"class":134}," Partial",[124,601,602],{"class":138},"\u003C{\n",[124,604,605,608,610,612,614,616,618,620,623,626,630,632,634,636,638,640,643,645,648],{"class":126,"line":422},[124,606,607],{"class":162}," [",[124,609,310],{"class":134},[124,611,313],{"class":148},[124,613,316],{"class":148},[124,615,492],{"class":134},[124,617,354],{"class":162},[124,619,357],{"class":148},[124,621,622],{"class":162}," (",[124,624,625],{"class":138},"(",[124,627,629],{"class":628},"s99_P","data",[124,631,357],{"class":148},[124,633,492],{"class":134},[124,635,368],{"class":162},[124,637,310],{"class":134},[124,639,354],{"class":162},[124,641,642],{"class":138},")",[124,644,363],{"class":130},[124,646,647],{"class":158}," void",[124,649,650],{"class":162},")[]\n",[124,652,653,656,658],{"class":126,"line":427},[124,654,655],{"class":138}," }>",[124,657,149],{"class":148},[124,659,660],{"class":138}," {}\n",[124,662,663],{"class":126,"line":447},[124,664,221],{"emptyLinePlaceholder":220},[124,666,667,671,673,675,677,679,681,684,687,689,691,694,698,700,702,704,706,708,710,712,714,716,718,720,722],{"class":126,"line":453},[124,668,670],{"class":669},"sVXei"," on",[124,672,139],{"class":138},[124,674,310],{"class":134},[124,676,155],{"class":130},[124,678,316],{"class":148},[124,680,492],{"class":134},[124,682,683],{"class":138},">(",[124,685,686],{"class":628},"event",[124,688,357],{"class":148},[124,690,346],{"class":134},[124,692,693],{"class":138},",",[124,695,697],{"class":696},"sGLFI"," callback",[124,699,357],{"class":148},[124,701,622],{"class":138},[124,703,629],{"class":628},[124,705,357],{"class":148},[124,707,492],{"class":134},[124,709,368],{"class":162},[124,711,310],{"class":134},[124,713,354],{"class":162},[124,715,642],{"class":138},[124,717,363],{"class":130},[124,719,647],{"class":158},[124,721,642],{"class":138},[124,723,302],{"class":138},[124,725,726,729,732,735,739,742,745,747,749,752],{"class":126,"line":459},[124,727,728],{"class":321}," if",[124,730,622],{"class":731},"skxfh",[124,733,734],{"class":148},"!",[124,736,738],{"class":737},"s39Yj","this",[124,740,741],{"class":138},".",[124,743,744],{"class":162},"listeners",[124,746,368],{"class":731},[124,748,686],{"class":162},[124,750,751],{"class":731},"]) ",[124,753,754],{"class":138},"{\n",[124,756,757,760,762,764,766,768,771,774],{"class":126,"line":465},[124,758,759],{"class":737}," this",[124,761,741],{"class":138},[124,763,744],{"class":162},[124,765,368],{"class":731},[124,767,686],{"class":162},[124,769,770],{"class":731},"] ",[124,772,773],{"class":148},"=",[124,775,776],{"class":731}," []\n",[124,778,779],{"class":126,"line":471},[124,780,781],{"class":138}," }\n",[124,783,785,788,790,792,794,796,798,801,804,806,809],{"class":126,"line":784},16,[124,786,787],{"class":737}," this",[124,789,741],{"class":138},[124,791,744],{"class":162},[124,793,368],{"class":731},[124,795,686],{"class":162},[124,797,354],{"class":731},[124,799,800],{"class":138},"?.",[124,802,803],{"class":696},"push",[124,805,625],{"class":731},[124,807,808],{"class":162},"callback",[124,810,811],{"class":731},")\n",[124,813,815],{"class":126,"line":814},17,[124,816,817],{"class":138}," }\n",[124,819,821],{"class":126,"line":820},18,[124,822,221],{"emptyLinePlaceholder":220},[124,824,826,829,831,833,835,837,839,841,843,845,847,849,852,854,856,858,860,862,864],{"class":126,"line":825},19,[124,827,828],{"class":669}," emit",[124,830,139],{"class":138},[124,832,310],{"class":134},[124,834,155],{"class":130},[124,836,316],{"class":148},[124,838,492],{"class":134},[124,840,683],{"class":138},[124,842,686],{"class":628},[124,844,357],{"class":148},[124,846,346],{"class":134},[124,848,693],{"class":138},[124,850,851],{"class":628}," data",[124,853,357],{"class":148},[124,855,492],{"class":134},[124,857,368],{"class":162},[124,859,310],{"class":134},[124,861,354],{"class":162},[124,863,642],{"class":138},[124,865,302],{"class":138},[124,867,869,871,873,875,877,879,881,883,886,888,890,892,894,896,898],{"class":126,"line":868},20,[124,870,787],{"class":737},[124,872,741],{"class":138},[124,874,744],{"class":162},[124,876,368],{"class":731},[124,878,686],{"class":162},[124,880,354],{"class":731},[124,882,800],{"class":138},[124,884,885],{"class":696},"forEach",[124,887,625],{"class":731},[124,889,808],{"class":628},[124,891,363],{"class":130},[124,893,697],{"class":696},[124,895,625],{"class":731},[124,897,629],{"class":162},[124,899,900],{"class":731},"))\n",[124,902,904],{"class":126,"line":903},21,[124,905,817],{"class":138},[124,907,909],{"class":126,"line":908},22,[124,910,378],{"class":138},[23,912,55],{"id":913},"performance-considerations",[19,915,916],{},"When working with complex types, consider the following metrics:",[918,919,920,938],"table",{},[921,922,923],"thead",{},[924,925,926,930,933,936],"tr",{},[927,928,929],"th",{},"Pattern",[927,931,932],{},"Compile Time",[927,934,935],{},"Runtime Impact",[927,937,74],{},[939,940,941,956,968],"tbody",{},[924,942,943,947,950,953],{},[944,945,946],"td",{},"Generics",[944,948,949],{},"ā­ā­ā­",[944,951,952],{},"None",[944,954,955],{},"High",[924,957,958,961,964,966],{},[944,959,960],{},"Unions",[944,962,963],{},"ā­ā­",[944,965,952],{},[944,967,955],{},[924,969,970,973,976,978],{},[944,971,972],{},"Any",[944,974,975],{},"ā­",[944,977,952],{},[944,979,980],{},"Low",[63,982,984],{"id":983},"code-quality-metrics","Code Quality Metrics",[114,986,990],{"className":987,"code":988,"language":989,"meta":119,"style":119},"language-mermaid shiki shiki-themes material-theme-lighter github-light github-dark","flowchart LR\n A([Type Safety]) --> B([Code Quality])\n B --> C([Maintainability])\n B --> D([Reliability])\n C --> E([Developer Experience])\n D --> E\n","mermaid",[121,991,992,997,1002,1007,1012,1017],{"__ignoreMap":119},[124,993,994],{"class":126,"line":127},[124,995,996],{},"flowchart LR\n",[124,998,999],{"class":126,"line":178},[124,1000,1001],{}," A([Type Safety]) --> B([Code Quality])\n",[124,1003,1004],{"class":126,"line":217},[124,1005,1006],{}," B --> C([Maintainability])\n",[124,1008,1009],{"class":126,"line":224},[124,1010,1011],{}," B --> D([Reliability])\n",[124,1013,1014],{"class":126,"line":231},[124,1015,1016],{}," C --> E([Developer Experience])\n",[124,1018,1019],{"class":126,"line":256},[124,1020,1021],{}," D --> E\n",[23,1023,1025],{"id":1024},"best-practices-checklist","Best Practices Checklist",[76,1027,1030,1039,1045,1051],{"className":1028},[1029],"contains-task-list",[31,1031,1034,1038],{"className":1032},[1033],"task-list-item",[1035,1036],"input",{"disabled":220,"type":1037},"checkbox"," Use generics for reusable components",[31,1040,1042,1044],{"className":1041},[1033],[1035,1043],{"disabled":220,"type":1037}," Implement proper error handling",[31,1046,1048,1050],{"className":1047},[1033],[1035,1049],{"disabled":220,"type":1037}," Document complex type patterns",[31,1052,1054,1056],{"className":1053},[1033],[1035,1055],{"disabled":220,"type":1037}," Write unit tests for type behavior",[63,1058,1060],{"id":1059},"example-implementation","Example Implementation",[19,1062,1063],{},"Here's a practical example of implementing a type-safe API client:",[114,1065,1067],{"className":116,"code":1066,"language":118,"meta":119,"style":119},"interface ApiResponse\u003CT> {\n data: T\n status: number\n timestamp: number\n}\n\ninterface ApiError {\n code: number\n message: string\n}\n\nasync function fetchData\u003CT>(url: string): Promise\u003CApiResponse\u003CT>> {\n try {\n const response = await fetch(url)\n const data: T = await response.json()\n\n return {\n data,\n status: response.status,\n timestamp: Date.now(),\n }\n } catch (error) {\n throw {\n code: 500,\n message: error instanceof Error ? error.message : 'Unknown error',\n } as ApiError\n }\n}\n",[121,1068,1069,1084,1094,1103,1112,1116,1120,1129,1138,1147,1151,1155,1200,1207,1230,1254,1258,1265,1273,1289,1309,1313,1331,1339,1353,1392,1403,1408],{"__ignoreMap":119},[124,1070,1071,1073,1076,1078,1080,1082],{"class":126,"line":127},[124,1072,387],{"class":130},[124,1074,1075],{"class":134}," ApiResponse",[124,1077,139],{"class":138},[124,1079,142],{"class":134},[124,1081,145],{"class":138},[124,1083,302],{"class":138},[124,1085,1086,1089,1091],{"class":126,"line":178},[124,1087,1088],{"class":397}," data",[124,1090,357],{"class":148},[124,1092,1093],{"class":134}," T\n",[124,1095,1096,1099,1101],{"class":126,"line":217},[124,1097,1098],{"class":397}," status",[124,1100,357],{"class":148},[124,1102,414],{"class":158},[124,1104,1105,1108,1110],{"class":126,"line":224},[124,1106,1107],{"class":397}," timestamp",[124,1109,357],{"class":148},[124,1111,414],{"class":158},[124,1113,1114],{"class":126,"line":231},[124,1115,378],{"class":138},[124,1117,1118],{"class":126,"line":256},[124,1119,221],{"emptyLinePlaceholder":220},[124,1121,1122,1124,1127],{"class":126,"line":406},[124,1123,387],{"class":130},[124,1125,1126],{"class":134}," ApiError",[124,1128,302],{"class":138},[124,1130,1131,1134,1136],{"class":126,"line":417},[124,1132,1133],{"class":397}," code",[124,1135,357],{"class":148},[124,1137,414],{"class":158},[124,1139,1140,1143,1145],{"class":126,"line":422},[124,1141,1142],{"class":397}," message",[124,1144,357],{"class":148},[124,1146,403],{"class":158},[124,1148,1149],{"class":126,"line":427},[124,1150,378],{"class":138},[124,1152,1153],{"class":126,"line":447},[124,1154,221],{"emptyLinePlaceholder":220},[124,1156,1157,1160,1163,1166,1168,1170,1172,1175,1177,1179,1181,1183,1186,1188,1191,1193,1195,1198],{"class":126,"line":453},[124,1158,1159],{"class":130},"async",[124,1161,1162],{"class":130}," function",[124,1164,1165],{"class":696}," fetchData",[124,1167,139],{"class":138},[124,1169,142],{"class":134},[124,1171,683],{"class":138},[124,1173,1174],{"class":628},"url",[124,1176,357],{"class":148},[124,1178,198],{"class":158},[124,1180,642],{"class":138},[124,1182,357],{"class":148},[124,1184,1185],{"class":134}," Promise",[124,1187,139],{"class":138},[124,1189,1190],{"class":134},"ApiResponse",[124,1192,139],{"class":138},[124,1194,142],{"class":134},[124,1196,1197],{"class":138},">>",[124,1199,302],{"class":138},[124,1201,1202,1205],{"class":126,"line":459},[124,1203,1204],{"class":321}," try",[124,1206,302],{"class":138},[124,1208,1209,1212,1216,1218,1221,1224,1226,1228],{"class":126,"line":465},[124,1210,1211],{"class":130}," const",[124,1213,1215],{"class":1214},"s_hVV"," response",[124,1217,149],{"class":148},[124,1219,1220],{"class":321}," await",[124,1222,1223],{"class":696}," fetch",[124,1225,625],{"class":731},[124,1227,1174],{"class":162},[124,1229,811],{"class":731},[124,1231,1232,1234,1236,1238,1240,1242,1244,1246,1248,1251],{"class":126,"line":471},[124,1233,1211],{"class":130},[124,1235,851],{"class":1214},[124,1237,357],{"class":148},[124,1239,152],{"class":134},[124,1241,149],{"class":148},[124,1243,1220],{"class":321},[124,1245,1215],{"class":162},[124,1247,741],{"class":138},[124,1249,1250],{"class":696},"json",[124,1252,1253],{"class":731},"()\n",[124,1255,1256],{"class":126,"line":784},[124,1257,221],{"emptyLinePlaceholder":220},[124,1259,1260,1263],{"class":126,"line":814},[124,1261,1262],{"class":321}," return",[124,1264,302],{"class":138},[124,1266,1267,1270],{"class":126,"line":820},[124,1268,1269],{"class":162}," data",[124,1271,1272],{"class":138},",\n",[124,1274,1275,1278,1280,1282,1284,1287],{"class":126,"line":825},[124,1276,1277],{"class":731}," status",[124,1279,357],{"class":138},[124,1281,1215],{"class":162},[124,1283,741],{"class":138},[124,1285,1286],{"class":162},"status",[124,1288,1272],{"class":138},[124,1290,1291,1294,1296,1299,1301,1304,1307],{"class":126,"line":868},[124,1292,1293],{"class":731}," timestamp",[124,1295,357],{"class":138},[124,1297,1298],{"class":162}," Date",[124,1300,741],{"class":138},[124,1302,1303],{"class":696},"now",[124,1305,1306],{"class":731},"()",[124,1308,1272],{"class":138},[124,1310,1311],{"class":126,"line":903},[124,1312,781],{"class":138},[124,1314,1315,1318,1321,1323,1326,1329],{"class":126,"line":908},[124,1316,1317],{"class":138}," }",[124,1319,1320],{"class":321}," catch",[124,1322,622],{"class":731},[124,1324,1325],{"class":162},"error",[124,1327,1328],{"class":731},") ",[124,1330,754],{"class":138},[124,1332,1334,1337],{"class":126,"line":1333},23,[124,1335,1336],{"class":321}," throw",[124,1338,302],{"class":138},[124,1340,1342,1345,1347,1351],{"class":126,"line":1341},24,[124,1343,1344],{"class":731}," code",[124,1346,357],{"class":138},[124,1348,1350],{"class":1349},"srdBf"," 500",[124,1352,1272],{"class":138},[124,1354,1356,1359,1361,1364,1367,1370,1372,1374,1376,1379,1381,1384,1387,1390],{"class":126,"line":1355},25,[124,1357,1358],{"class":731}," message",[124,1360,357],{"class":138},[124,1362,1363],{"class":162}," error",[124,1365,1366],{"class":148}," instanceof",[124,1368,1369],{"class":134}," Error",[124,1371,207],{"class":148},[124,1373,1363],{"class":162},[124,1375,741],{"class":138},[124,1377,1378],{"class":162},"message",[124,1380,172],{"class":148},[124,1382,1383],{"class":325}," '",[124,1385,1386],{"class":329},"Unknown error",[124,1388,1389],{"class":325},"'",[124,1391,1272],{"class":138},[124,1393,1395,1398,1400],{"class":126,"line":1394},26,[124,1396,1397],{"class":138}," }",[124,1399,322],{"class":321},[124,1401,1402],{"class":134}," ApiError\n",[124,1404,1406],{"class":126,"line":1405},27,[124,1407,817],{"class":138},[124,1409,1411],{"class":126,"line":1410},28,[124,1412,378],{"class":138},[23,1414,1416],{"id":1415},"advanced-type-utilities","Advanced Type Utilities",[19,1418,1419],{},"Here's a visualization of how TypeScript's type system works:",[114,1421,1426],{"className":1422,"code":1424,"language":1425},[1423],"language-text","Type Hierarchy\nā””ā”€ā”€ any\n ā”œā”€ā”€ unknown\n ā”‚ ā”œā”€ā”€ primitive types\n ā”‚ ā”‚ ā”œā”€ā”€ string\n ā”‚ ā”‚ ā”œā”€ā”€ number\n ā”‚ ā”‚ ā””ā”€ā”€ boolean\n ā”‚ ā””ā”€ā”€ object types\n ā”‚ ā”œā”€ā”€ interfaces\n ā”‚ ā””ā”€ā”€ classes\n ā””ā”€ā”€ never\n","text",[121,1427,1424],{"__ignoreMap":119},[63,1429,1431],{"id":1430},"keyboard-shortcuts","Keyboard Shortcuts",[918,1433,1434,1447],{},[921,1435,1436],{},[924,1437,1438,1441,1444],{},[927,1439,1440],{},"Action",[927,1442,1443],{},"Windows\u002FLinux",[927,1445,1446],{},"macOS",[939,1448,1449,1464,1478],{},[924,1450,1451,1454,1459],{},[944,1452,1453],{},"Quick Fix",[944,1455,1456],{},[121,1457,1458],{},"Ctrl + .",[944,1460,1461],{},[121,1462,1463],{},"āŒ˜ + .",[924,1465,1466,1469,1474],{},[944,1467,1468],{},"Go to Definition",[944,1470,1471],{},[121,1472,1473],{},"F12",[944,1475,1476],{},[121,1477,1473],{},[924,1479,1480,1483,1488],{},[944,1481,1482],{},"Find References",[944,1484,1485],{},[121,1486,1487],{},"Shift + F12",[944,1489,1490],{},[121,1491,1487],{},[23,1493,1495],{"id":1494},"conclusion","Conclusion",[19,1497,1498],{},"TypeScript's type system is incredibly powerful when used correctly. By understanding and implementing these advanced patterns, you can:",[28,1500,1501,1504,1507,1510],{},[31,1502,1503],{},"Write more maintainable code",[31,1505,1506],{},"Catch errors early",[31,1508,1509],{},"Improve team collaboration",[31,1511,1512],{},"Create better developer experiences",[16,1514,1515],{},[19,1516,1517,1518,1521],{},"šŸ’” ",[72,1519,1520],{},"Pro Tip",": Always start with the simplest type that meets your needs, and only add complexity when necessary.",[101,1523],{},[23,1525,1527],{"id":1526},"related-resources","Related Resources",[76,1529,1530,1538,1545],{},[31,1531,1532],{},[34,1533,1537],{"href":1534,"rel":1535},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002F",[1536],"nofollow","TypeScript Official Documentation",[31,1539,1540],{},[34,1541,1544],{"href":1542,"rel":1543},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript",[1536],"TypeScript GitHub Repository",[31,1546,1547],{},[34,1548,1551],{"href":1549,"rel":1550},"https:\u002F\u002Fwww.amazon.com\u002Fdp\u002F1789133416",[1536],"TypeScript Design Patterns Book",[1553,1554,1555],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sVXei, html code.shiki .sVXei{--shiki-light:#E53935;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":119,"searchDepth":178,"depth":178,"links":1557},[1558,1559,1562,1566,1567,1570,1573,1576,1577],{"id":25,"depth":178,"text":26},{"id":58,"depth":178,"text":37,"children":1560},[1561],{"id":65,"depth":217,"text":66},{"id":105,"depth":178,"text":43,"children":1563},[1564,1565],{"id":108,"depth":217,"text":109},{"id":278,"depth":217,"text":279},{"id":477,"depth":178,"text":49},{"id":913,"depth":178,"text":55,"children":1568},[1569],{"id":983,"depth":217,"text":984},{"id":1024,"depth":178,"text":1025,"children":1571},[1572],{"id":1059,"depth":217,"text":1060},{"id":1415,"depth":178,"text":1416,"children":1574},[1575],{"id":1430,"depth":217,"text":1431},{"id":1494,"depth":178,"text":1495},{"id":1526,"depth":178,"text":1527},"2024-01-10","Deep dive into advanced TypeScript patterns including generics, conditional types, mapped types, and practical examples that will level up your TypeScript skills.","md",{},"\u002Fblog\u002Fadvanced-typescript-patterns",{"title":6,"description":1579},"blog\u002Fadvanced-typescript-patterns",[1586,1587,1588,1589,1590],"TypeScript","Software Engineering","Web Development","Programming","JavaScript","j9lZxJ-m1tFq-042OlQ3_JWLaqKCEarcHHsPYtDKFgU",1776380893810]