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