[{"data":1,"prerenderedAt":307},["ShallowReactive",2],{"blog-deep-dive-into-typescript":3},{"id":4,"title":5,"author":6,"body":7,"date":289,"description":13,"extension":290,"meta":291,"navigation":293,"path":292,"seo":294,"slug":301,"status":302,"stem":303,"summary":304,"tags":305,"__hash__":306},"blog\u002Fblog\u002Fdeep-dive-into-typescript.md","Deep Dive into TypeScript","Sharique",{"type":8,"value":9,"toc":283},"minimark",[10,14,19,27,107,113,117,132,176,179,183,193,269,272,276,279],[11,12,13],"p",{},"TypeScript's type system goes far beyond simple annotations. Once you move past the basics, a handful of features unlock a completely different way of thinking about your code.",[15,16,18],"h2",{"id":17},"generics","Generics",[11,20,21,22,26],{},"Generics let you write logic once and reuse it across types without losing safety. A common pitfall is reaching for ",[23,24,25],"code",{},"any"," when a function needs to be flexible — a generic parameter is almost always the right tool instead.",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-typescript shiki shiki-themes github-light github-dark","function first\u003CT>(arr: T[]): T | undefined {\n  return arr[0];\n}\n","typescript","",[23,35,36,86,101],{"__ignoreMap":33},[37,38,41,45,49,53,56,59,63,66,69,72,74,76,79,83],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"szBVR","function",[37,46,48],{"class":47},"sScJk"," first",[37,50,52],{"class":51},"sVt8B","\u003C",[37,54,55],{"class":47},"T",[37,57,58],{"class":51},">(",[37,60,62],{"class":61},"s4XuR","arr",[37,64,65],{"class":43},":",[37,67,68],{"class":47}," T",[37,70,71],{"class":51},"[])",[37,73,65],{"class":43},[37,75,68],{"class":47},[37,77,78],{"class":43}," |",[37,80,82],{"class":81},"sj4cs"," undefined",[37,84,85],{"class":51}," {\n",[37,87,89,92,95,98],{"class":39,"line":88},2,[37,90,91],{"class":43},"  return",[37,93,94],{"class":51}," arr[",[37,96,97],{"class":81},"0",[37,99,100],{"class":51},"];\n",[37,102,104],{"class":39,"line":103},3,[37,105,106],{"class":51},"}\n",[11,108,109,110,112],{},"The inferred return type follows the input automatically. No casting, no ",[23,111,25],{},".",[15,114,116],{"id":115},"utility-types","Utility Types",[11,118,119,120,123,124,127,128,131],{},"TypeScript ships with a set of built-in mapped types that cover the most common transformations. ",[23,121,122],{},"Partial\u003CT>"," makes every property optional, ",[23,125,126],{},"Required\u003CT>"," does the opposite, and ",[23,129,130],{},"Pick\u003CT, K>"," narrows a type to just the keys you need.",[28,133,135],{"className":30,"code":134,"language":32,"meta":33,"style":33},"type UserPreview = Pick\u003CUser, \"id\" | \"name\" | \"avatarUrl\">;\n",[23,136,137],{"__ignoreMap":33},[37,138,139,142,145,148,151,153,156,159,163,165,168,170,173],{"class":39,"line":40},[37,140,141],{"class":43},"type",[37,143,144],{"class":47}," UserPreview",[37,146,147],{"class":43}," =",[37,149,150],{"class":47}," Pick",[37,152,52],{"class":51},[37,154,155],{"class":47},"User",[37,157,158],{"class":51},", ",[37,160,162],{"class":161},"sZZnC","\"id\"",[37,164,78],{"class":43},[37,166,167],{"class":161}," \"name\"",[37,169,78],{"class":43},[37,171,172],{"class":161}," \"avatarUrl\"",[37,174,175],{"class":51},">;\n",[11,177,178],{},"Reaching for these before defining a new interface keeps your type graph from growing out of control.",[15,180,182],{"id":181},"discriminated-unions","Discriminated Unions",[11,184,185,186,189,190,192],{},"When a value can be one of several shapes, a discriminated union beats optional properties every time. Add a shared literal field — conventionally called ",[23,187,188],{},"kind"," or ",[23,191,141],{}," — and TypeScript narrows automatically inside each branch.",[28,194,196],{"className":30,"code":195,"language":32,"meta":33,"style":33},"type Result\u003CT> =\n  | { kind: \"ok\"; value: T }\n  | { kind: \"error\"; message: string };\n",[23,197,198,215,243],{"__ignoreMap":33},[37,199,200,202,205,207,209,212],{"class":39,"line":40},[37,201,141],{"class":43},[37,203,204],{"class":47}," Result",[37,206,52],{"class":51},[37,208,55],{"class":47},[37,210,211],{"class":51},"> ",[37,213,214],{"class":43},"=\n",[37,216,217,220,223,225,227,230,233,236,238,240],{"class":39,"line":88},[37,218,219],{"class":43},"  |",[37,221,222],{"class":51}," { ",[37,224,188],{"class":61},[37,226,65],{"class":43},[37,228,229],{"class":161}," \"ok\"",[37,231,232],{"class":51},"; ",[37,234,235],{"class":61},"value",[37,237,65],{"class":43},[37,239,68],{"class":47},[37,241,242],{"class":51}," }\n",[37,244,245,247,249,251,253,256,258,261,263,266],{"class":39,"line":103},[37,246,219],{"class":43},[37,248,222],{"class":51},[37,250,188],{"class":61},[37,252,65],{"class":43},[37,254,255],{"class":161}," \"error\"",[37,257,232],{"class":51},[37,259,260],{"class":61},"message",[37,262,65],{"class":43},[37,264,265],{"class":81}," string",[37,267,268],{"class":51}," };\n",[11,270,271],{},"The exhaustiveness check is free: if you forget a case, the compiler tells you immediately.",[15,273,275],{"id":274},"key-takeaway","Key Takeaway",[11,277,278],{},"These three features — generics, utility types, and discriminated unions — cover the majority of real-world TypeScript complexity. Master them and you will spend far less time fighting the type system and far more time using it as a design tool.",[280,281,282],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":33,"searchDepth":88,"depth":103,"links":284},[285,286,287,288],{"id":17,"depth":88,"text":18},{"id":115,"depth":88,"text":116},{"id":181,"depth":88,"text":182},{"id":274,"depth":88,"text":275},"2025-12-11","md",{"url":292},"\u002Fblog\u002Fdeep-dive-into-typescript",true,{"description":295,"keywords":296,"title":5},"A comprehensive look at TypeScript's type system — generics, utility types, discriminated unions, and patterns for writing safer, more maintainable code.",[297,298,299,18,300],"TypeScript","JavaScript","Type Safety","Programming","deep-dive-into-typescript","published","blog\u002Fdeep-dive-into-typescript","A practical look at TypeScript's most powerful features — generics, utility types, and discriminated unions — with patterns you can apply today.",[297,298,300],"WL07kcUzMNxlbmhyC3DONwlvqGPGvsXXUsUx33iS9eY",1778492224711]