Typescript As Const snippet
Powerful way to use As Const from Matt Pocock
I recently watched an enlightening quick Youtube video by Matt Pocock on what he considers Typescripts most underrated tool -- As Const. as const does as it implies, sets a variable as a constant. For example
// Produces a type error: Type '"light"' is not assignable to type '"dark"' let DARK = 'dark' as const; DARK = 'light';
Matt uses as const to construct a handy string union type off of a non-mutable object.
const routes = { home: '/', about: 'about', contact: 'contact' } as const type RouteObjType = typeof routes; // Gets the obj keys "home" | "about" | "contact" type RouteKeyType = keyof RouteObjType; // The magic 🧙♂️ of as const happens here, where Typescript // interprets the Route type as "/" | "about" | "contact", // rather than just a primitive string type Route = RouteObjType[RouteKeyType];
He also touches on Object.Freeze which freezes the object it is passed: A frozen object can no longer be changed: new properties cannot be added, existing properties cannot be removed, their enumerability, configurability, writability, or value cannot be changed, and the object's prototype cannot be re-assigned.
However, unlike as const, Object.Freeze won't prevent a user from doing deep changes in the object i.e.
const routes = { home: '/', about: 'about', contact: 'contact', store: { shoes: 'shoes', }, } as const; // TS error routes.store.shoes = 'sneakers'; const routes = Object.freeze({ home: '/', about: 'about', contact: 'contact', store: { shoes: 'shoes', }, }); // Error routes.home = 'home'; // No error routes.store.shoes = 'sneakers';