[{"data":1,"prerenderedAt":1025},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems":142,"\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems-surround":1022},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","\u002Fblog\u002Fvuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog\u002F001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","\u002Fblog\u002Funderstanding-javascript-and-its-quirks","blog\u002F002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","\u002Fblog\u002Fintroducing-vues-latest-experimental-vapor-mode","blog\u002F003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","\u002Fblog\u002Fecmascript-2024-nears-finalization","blog\u002F004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","\u002Fblog\u002Fui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog\u002F005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","\u002Fblog\u002Fmicro-frontend-architecture","blog\u002F006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","\u002Fblog\u002Fpre-rendering-and-hydration-in-vuejs","blog\u002F007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript","blog\u002F008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","\u002Fblog\u002Fvuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog\u002F009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","\u002Fblog\u002Fmoving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog\u002F010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","\u002Fblog\u002Fnuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog\u002F011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","\u002Fblog\u002Fa-tribute-to-asa-bain-thank-you-for-everything","blog\u002F012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","\u002Fblog\u002Fmigrating-javascript-to-typescript-in-aspnet-mvc-projects","blog\u002F013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs","blog\u002F014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","\u002Fblog\u002Fwhich-ui-javascript-framework-should-you-use","blog\u002F015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","\u002Fblog\u002Fvue-ai-integration-workflows-enhancing-developer-productivity","blog\u002F016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","\u002Fblog\u002Fopenapi-standards-scalar-integration-for-nodejs-apps","blog\u002F017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","\u002Fblog\u002Fnuxt-317-data-fetching-improvements","blog\u002F019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","\u002Fblog\u002Fsubdomain-based-multi-tenancy-in-nuxt","blog\u002F020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog\u002F021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","\u002Fblog\u002Funit-testing-vue-applications-with-vitest-and-agentic-ai","blog\u002F022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems","blog\u002F023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt\u002FVercel Acquisition and Its Impact on NuxtHub Users","\u002Fblog\u002Fnuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog\u002F024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","\u002Fblog\u002Fstate-of-vue-nuxt-ecosystem-2025","blog\u002F025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","\u002Fblog\u002Ffeature-adoption-in-typescript-over-time","blog\u002F026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog\u002F027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","\u002Fblog\u002Fstrategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog\u002F028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","\u002Fblog\u002Fnuxt-4-and-the-evolving-full-stack-framework-landscape","blog\u002F029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","\u002Fblog\u002Fbun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog\u002F030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","\u002Fblog\u002Ftop-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog\u002F031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","\u002Fblog\u002Fstrategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog\u002F032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","\u002Fblog\u002Fthe-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog\u002F033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog\u002F034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":94,"author":144,"body":148,"date":1015,"description":1016,"extension":1017,"image":1018,"meta":1019,"minRead":243,"navigation":276,"path":95,"seo":1020,"stem":96,"__hash__":1021},"blog\u002Fblog\u002F023.hidden-features-lesser-known-typescript-gems.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":1006},"minimark",[151,156,160,163,167,170,199,320,323,326,330,337,452,455,457,461,464,558,561,563,567,574,835,838,840,844,847,970,973,975,979,988,999,1002],[152,153,155],"h2",{"id":154},"introduction","Introduction",[157,158,159],"p",{},"TypeScript has become the default choice for building scalable JavaScript applications. While most developers are familiar with its basic features such as static typing, interfaces, and generics, TypeScript also includes lesser-known but powerful features that can significantly improve developer experience, reduce boilerplate, and make applications safer.",[157,161,162],{},"This report highlights several of these \"hidden gems\" in TypeScript and explains how they can be applied in real-world projects.",[152,164,166],{"id":165},"_2-utility-types","2. Utility Types",[157,168,169],{},"TypeScript ships with a rich set of utility types that are often overlooked. Some of the most useful include:",[171,172,173,181,187,193],"ul",{},[174,175,176,180],"li",{},[177,178,179],"code",{},"Partial\u003CT>"," – Makes all properties optional",[174,182,183,186],{},[177,184,185],{},"Pick\u003CT, K>"," – Selects a subset of properties",[174,188,189,192],{},[177,190,191],{},"Omit\u003CT, K>"," – Removes certain properties",[174,194,195,198],{},[177,196,197],{},"Record\u003CK, T>"," – Defines key-value maps",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\ntype UpdateUser = Partial\u003COmit\u003CUser, \"id\">>;\n","tsx","",[177,207,208,225,241,253,265,271,278],{"__ignoreMap":205},[209,210,213,217,221],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"spNyl","interface",[209,218,220],{"class":219},"sBMFI"," User",[209,222,224],{"class":223},"sMK4o"," {\n",[209,226,228,232,235,238],{"class":211,"line":227},2,[209,229,231],{"class":230},"swJcz","  id",[209,233,234],{"class":223},":",[209,236,237],{"class":219}," string",[209,239,240],{"class":223},";\n",[209,242,244,247,249,251],{"class":211,"line":243},3,[209,245,246],{"class":230},"  name",[209,248,234],{"class":223},[209,250,237],{"class":219},[209,252,240],{"class":223},[209,254,256,259,261,263],{"class":211,"line":255},4,[209,257,258],{"class":230},"  email",[209,260,234],{"class":223},[209,262,237],{"class":219},[209,264,240],{"class":223},[209,266,268],{"class":211,"line":267},5,[209,269,270],{"class":223},"}\n",[209,272,274],{"class":211,"line":273},6,[209,275,277],{"emptyLinePlaceholder":276},true,"\n",[209,279,281,284,287,290,293,296,299,301,304,307,310,314,317],{"class":211,"line":280},7,[209,282,283],{"class":215},"type",[209,285,286],{"class":219}," UpdateUser",[209,288,289],{"class":223}," =",[209,291,292],{"class":219}," Partial",[209,294,295],{"class":223},"\u003C",[209,297,298],{"class":219},"Omit",[209,300,295],{"class":223},[209,302,303],{"class":219},"User",[209,305,306],{"class":223},",",[209,308,309],{"class":223}," \"",[209,311,313],{"class":312},"sfazB","id",[209,315,316],{"class":223},"\"",[209,318,319],{"class":223},">>;\n",[157,321,322],{},"Why it matters: Cuts down on boilerplate when working with complex data models.",[324,325],"hr",{},[152,327,329],{"id":328},"_3-the-satisfies-operator","3. The satisfies Operator",[157,331,332,333,336],{},"Introduced in TypeScript 4.9, ",[177,334,335],{},"satisfies"," ensures an object conforms to a type without widening its type unnecessarily.",[200,338,340],{"className":202,"code":339,"language":204,"meta":205,"style":205},"type Role = \"admin\" | \"manager\" | \"employee\";\n\nconst userRoles = {\n  alice: \"admin\",\n  bob: \"manager\",\n} satisfies Record\u003Cstring, Role>;\n",[177,341,342,379,383,397,413,428],{"__ignoreMap":205},[209,343,344,346,349,351,353,356,358,361,363,366,368,370,372,375,377],{"class":211,"line":212},[209,345,283],{"class":215},[209,347,348],{"class":219}," Role",[209,350,289],{"class":223},[209,352,309],{"class":223},[209,354,355],{"class":312},"admin",[209,357,316],{"class":223},[209,359,360],{"class":223}," |",[209,362,309],{"class":223},[209,364,365],{"class":312},"manager",[209,367,316],{"class":223},[209,369,360],{"class":223},[209,371,309],{"class":223},[209,373,374],{"class":312},"employee",[209,376,316],{"class":223},[209,378,240],{"class":223},[209,380,381],{"class":211,"line":227},[209,382,277],{"emptyLinePlaceholder":276},[209,384,385,388,392,395],{"class":211,"line":243},[209,386,387],{"class":215},"const",[209,389,391],{"class":390},"sTEyZ"," userRoles ",[209,393,394],{"class":223},"=",[209,396,224],{"class":223},[209,398,399,402,404,406,408,410],{"class":211,"line":255},[209,400,401],{"class":230},"  alice",[209,403,234],{"class":223},[209,405,309],{"class":223},[209,407,355],{"class":312},[209,409,316],{"class":223},[209,411,412],{"class":223},",\n",[209,414,415,418,420,422,424,426],{"class":211,"line":267},[209,416,417],{"class":230},"  bob",[209,419,234],{"class":223},[209,421,309],{"class":223},[209,423,365],{"class":312},[209,425,316],{"class":223},[209,427,412],{"class":223},[209,429,430,433,437,440,442,445,447,449],{"class":211,"line":273},[209,431,432],{"class":223},"}",[209,434,436],{"class":435},"s7zQu"," satisfies",[209,438,439],{"class":219}," Record",[209,441,295],{"class":223},[209,443,444],{"class":219},"string",[209,446,306],{"class":223},[209,448,348],{"class":219},[209,450,451],{"class":223},">;\n",[157,453,454],{},"Why it matters: Provides the best of both worlds—type safety and accurate inference.",[324,456],{},[152,458,460],{"id":459},"_4-template-literal-types","4. Template Literal Types",[157,462,463],{},"Template literal types allow the creation of string patterns that are type-safe.",[200,465,467],{"className":202,"code":466,"language":204,"meta":205,"style":205},"type EventName = `on${Capitalize\u003Cstring>}`;\n\nconst clickEvent: EventName = \"onClick\"; \u002F\u002F ✅\nconst wrongEvent: EventName = \"click\";   \u002F\u002F ❌\n",[177,468,469,502,506,533],{"__ignoreMap":205},[209,470,471,473,476,478,481,484,487,490,492,494,497,500],{"class":211,"line":212},[209,472,283],{"class":215},[209,474,475],{"class":219}," EventName",[209,477,289],{"class":223},[209,479,480],{"class":223}," `",[209,482,483],{"class":312},"on",[209,485,486],{"class":223},"${",[209,488,489],{"class":219},"Capitalize",[209,491,295],{"class":223},[209,493,444],{"class":219},[209,495,496],{"class":223},">",[209,498,499],{"class":223},"}`",[209,501,240],{"class":223},[209,503,504],{"class":211,"line":227},[209,505,277],{"emptyLinePlaceholder":276},[209,507,508,510,513,515,517,519,521,524,526,529],{"class":211,"line":243},[209,509,387],{"class":215},[209,511,512],{"class":390}," clickEvent",[209,514,234],{"class":223},[209,516,475],{"class":219},[209,518,289],{"class":223},[209,520,309],{"class":223},[209,522,523],{"class":312},"onClick",[209,525,316],{"class":223},[209,527,528],{"class":223},";",[209,530,532],{"class":531},"sHwdD"," \u002F\u002F ✅\n",[209,534,535,537,540,542,544,546,548,551,553,555],{"class":211,"line":255},[209,536,387],{"class":215},[209,538,539],{"class":390}," wrongEvent",[209,541,234],{"class":223},[209,543,475],{"class":219},[209,545,289],{"class":223},[209,547,309],{"class":223},[209,549,550],{"class":312},"click",[209,552,316],{"class":223},[209,554,528],{"class":223},[209,556,557],{"class":531},"   \u002F\u002F ❌\n",[157,559,560],{},"Why it matters: Great for enforcing naming conventions and API consistency.",[324,562],{},[152,564,566],{"id":565},"_5-discriminated-unions-with-exhaustive-checking","5. Discriminated Unions with Exhaustive Checking",[157,568,569,570,573],{},"TypeScript unions can be paired with ",[177,571,572],{},"never"," to ensure that all cases are handled.",[200,575,577],{"className":202,"code":576,"language":204,"meta":205,"style":205},"type Shape =\n  | { kind: \"circle\"; radius: number }\n  | { kind: \"square\"; size: number };\n\nfunction area(shape: Shape): number {\n  switch (shape.kind) {\n    case \"circle\":\n      return Math.PI * shape.radius ** 2;\n    case \"square\":\n      return shape.size * shape.size;\n    default:\n      const _exhaustive: never = shape;\n      return _exhaustive;\n  }\n}\n",[177,578,579,589,622,651,655,682,704,718,752,765,787,795,815,824,830],{"__ignoreMap":205},[209,580,581,583,586],{"class":211,"line":212},[209,582,283],{"class":215},[209,584,585],{"class":219}," Shape",[209,587,588],{"class":223}," =\n",[209,590,591,594,597,600,602,604,607,609,611,614,616,619],{"class":211,"line":227},[209,592,593],{"class":223},"  |",[209,595,596],{"class":223}," {",[209,598,599],{"class":230}," kind",[209,601,234],{"class":223},[209,603,309],{"class":223},[209,605,606],{"class":312},"circle",[209,608,316],{"class":223},[209,610,528],{"class":223},[209,612,613],{"class":230}," radius",[209,615,234],{"class":223},[209,617,618],{"class":219}," number",[209,620,621],{"class":223}," }\n",[209,623,624,626,628,630,632,634,637,639,641,644,646,648],{"class":211,"line":243},[209,625,593],{"class":223},[209,627,596],{"class":223},[209,629,599],{"class":230},[209,631,234],{"class":223},[209,633,309],{"class":223},[209,635,636],{"class":312},"square",[209,638,316],{"class":223},[209,640,528],{"class":223},[209,642,643],{"class":230}," size",[209,645,234],{"class":223},[209,647,618],{"class":219},[209,649,650],{"class":223}," };\n",[209,652,653],{"class":211,"line":255},[209,654,277],{"emptyLinePlaceholder":276},[209,656,657,660,664,667,671,673,675,678,680],{"class":211,"line":267},[209,658,659],{"class":215},"function",[209,661,663],{"class":662},"s2Zo4"," area",[209,665,666],{"class":223},"(",[209,668,670],{"class":669},"sHdIc","shape",[209,672,234],{"class":223},[209,674,585],{"class":219},[209,676,677],{"class":223},"):",[209,679,618],{"class":219},[209,681,224],{"class":223},[209,683,684,687,690,692,695,698,701],{"class":211,"line":273},[209,685,686],{"class":435},"  switch",[209,688,689],{"class":230}," (",[209,691,670],{"class":390},[209,693,694],{"class":223},".",[209,696,697],{"class":390},"kind",[209,699,700],{"class":230},") ",[209,702,703],{"class":223},"{\n",[209,705,706,709,711,713,715],{"class":211,"line":280},[209,707,708],{"class":435},"    case",[209,710,309],{"class":223},[209,712,606],{"class":312},[209,714,316],{"class":223},[209,716,717],{"class":223},":\n",[209,719,721,724,727,729,732,735,738,740,743,746,750],{"class":211,"line":720},8,[209,722,723],{"class":435},"      return",[209,725,726],{"class":390}," Math",[209,728,694],{"class":223},[209,730,731],{"class":390},"PI",[209,733,734],{"class":223}," *",[209,736,737],{"class":390}," shape",[209,739,694],{"class":223},[209,741,742],{"class":390},"radius",[209,744,745],{"class":223}," **",[209,747,749],{"class":748},"sbssI"," 2",[209,751,240],{"class":223},[209,753,755,757,759,761,763],{"class":211,"line":754},9,[209,756,708],{"class":435},[209,758,309],{"class":223},[209,760,636],{"class":312},[209,762,316],{"class":223},[209,764,717],{"class":223},[209,766,768,770,772,774,777,779,781,783,785],{"class":211,"line":767},10,[209,769,723],{"class":435},[209,771,737],{"class":390},[209,773,694],{"class":223},[209,775,776],{"class":390},"size",[209,778,734],{"class":223},[209,780,737],{"class":390},[209,782,694],{"class":223},[209,784,776],{"class":390},[209,786,240],{"class":223},[209,788,790,793],{"class":211,"line":789},11,[209,791,792],{"class":435},"    default",[209,794,717],{"class":223},[209,796,798,801,804,806,809,811,813],{"class":211,"line":797},12,[209,799,800],{"class":215},"      const",[209,802,803],{"class":390}," _exhaustive",[209,805,234],{"class":223},[209,807,808],{"class":219}," never",[209,810,289],{"class":223},[209,812,737],{"class":390},[209,814,240],{"class":223},[209,816,818,820,822],{"class":211,"line":817},13,[209,819,723],{"class":435},[209,821,803],{"class":390},[209,823,240],{"class":223},[209,825,827],{"class":211,"line":826},14,[209,828,829],{"class":223},"  }\n",[209,831,833],{"class":211,"line":832},15,[209,834,270],{"class":223},[157,836,837],{},"Why it matters: Prevents missing cases when working with unions.",[324,839],{},[152,841,843],{"id":842},"_6-literal-inference-with-as-const-in-objects","6. Literal Inference with as const in Objects",[157,845,846],{},"You can freeze nested structures into immutable literal types:",[200,848,850],{"className":202,"code":849,"language":204,"meta":205,"style":205},"const THEMES = {\n  light: { background: \"#fff\", text: \"#000\" },\n  dark: { background: \"#000\", text: \"#fff\" },\n} as const;\n\ntype Theme = keyof typeof THEMES;\n",[177,851,852,863,901,934,946,950],{"__ignoreMap":205},[209,853,854,856,859,861],{"class":211,"line":212},[209,855,387],{"class":215},[209,857,858],{"class":390}," THEMES ",[209,860,394],{"class":223},[209,862,224],{"class":223},[209,864,865,868,870,872,875,877,879,882,884,886,889,891,893,896,898],{"class":211,"line":227},[209,866,867],{"class":230},"  light",[209,869,234],{"class":223},[209,871,596],{"class":223},[209,873,874],{"class":230}," background",[209,876,234],{"class":223},[209,878,309],{"class":223},[209,880,881],{"class":312},"#fff",[209,883,316],{"class":223},[209,885,306],{"class":223},[209,887,888],{"class":230}," text",[209,890,234],{"class":223},[209,892,309],{"class":223},[209,894,895],{"class":312},"#000",[209,897,316],{"class":223},[209,899,900],{"class":223}," },\n",[209,902,903,906,908,910,912,914,916,918,920,922,924,926,928,930,932],{"class":211,"line":243},[209,904,905],{"class":230},"  dark",[209,907,234],{"class":223},[209,909,596],{"class":223},[209,911,874],{"class":230},[209,913,234],{"class":223},[209,915,309],{"class":223},[209,917,895],{"class":312},[209,919,316],{"class":223},[209,921,306],{"class":223},[209,923,888],{"class":230},[209,925,234],{"class":223},[209,927,309],{"class":223},[209,929,881],{"class":312},[209,931,316],{"class":223},[209,933,900],{"class":223},[209,935,936,938,941,944],{"class":211,"line":255},[209,937,432],{"class":223},[209,939,940],{"class":435}," as",[209,942,943],{"class":215}," const",[209,945,240],{"class":223},[209,947,948],{"class":211,"line":267},[209,949,277],{"emptyLinePlaceholder":276},[209,951,952,954,957,959,962,965,968],{"class":211,"line":273},[209,953,283],{"class":215},[209,955,956],{"class":219}," Theme",[209,958,289],{"class":223},[209,960,961],{"class":223}," keyof",[209,963,964],{"class":223}," typeof",[209,966,967],{"class":390}," THEMES",[209,969,240],{"class":223},[157,971,972],{},"Why it matters: Helps in theming, configuration, and role-based design systems.",[324,974],{},[152,976,978],{"id":977},"conclusion","Conclusion",[157,980,981,982,984,985,987],{},"These features,",[177,983,387],{}," assertions, utility types, ",[177,986,335],{},", template literal types, discriminated unions, and literal inference demonstrate how TypeScript goes beyond \"just typing variables.\" By applying them, teams can achieve:",[171,989,990,993,996],{},[174,991,992],{},"Safer code with fewer runtime errors",[174,994,995],{},"More expressive types that reflect actual business logic",[174,997,998],{},"Cleaner, shorter codebases with less boilerplate",[157,1000,1001],{},"Mastering these lesser-known features allows developers to take full advantage of TypeScript, leading to more reliable and maintainable applications.",[1003,1004,1005],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":205,"searchDepth":227,"depth":227,"links":1007},[1008,1009,1010,1011,1012,1013,1014],{"id":154,"depth":227,"text":155},{"id":165,"depth":227,"text":166},{"id":328,"depth":227,"text":329},{"id":459,"depth":227,"text":460},{"id":565,"depth":227,"text":566},{"id":842,"depth":227,"text":843},{"id":977,"depth":227,"text":978},"2025-09-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F34803999\u002Fpexels-photo-34803999.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},{"title":94,"description":1016},"C4a3ExzyyudLQ1fxG-qfFjpxoEk4aCQUU8Q9bgdDBJI",[1023,1024],{"title":90,"path":91,"stem":92,"description":1016,"children":-1},{"title":98,"path":99,"stem":100,"description":1016,"children":-1},1779638276681]