Forem: Adeel Imran

Mastering Immutable Types with TypeScript `as const`

Adeel Imran — Thu, 13 Jun 2024 10:46:58 +0000

Enhance your TypeScript skills by mastering immutability and type safety with the as const feature. This guide walks you through key steps, cautionary notes, and tips for efficiency. Watch the full video here.

Objective

To improve immutability and type safety in TypeScript by leveraging the as const feature.

Section 1: Using `Object.freeze` for Immutability

Object.freeze is a method provided by JavaScript that makes an object immutable. When an object is frozen, you cannot add, delete, or modify its properties.

Example:

const routes = {
  home: '/',
  about: '/about',
  contact: '/contact'
};

Object.freeze(routes);

// Attempting to modify properties will fail
routes.home = '/new-home'; // Error: Cannot assign to 'home' because it is a read-only property.

Key Points:

Top-Level Immutability: Object.freeze ensures that the object routes is read-only at the top level.
Nested Objects: For complete immutability, nested objects require individual wrapping with Object.freeze.

Section 2: Leveraging `as const` for Immutability and Type Safety

The as const feature in TypeScript enhances immutability and type safety by converting the values of an object into their literal types.

Example:

const routes = {
  home: '/',
  about: '/about',
  contact: '/contact'
} as const;

// The type of `routes` is now:
// {
//   readonly home: "/",
//   readonly about: "/about",
//   readonly contact: "/contact"
// }

Key Points:

Literal Types: as const converts the values into their literal types, providing precise type safety.
Read-Only Properties: All properties become read-only, ensuring immutability without requiring Object.freeze.

Section 3: `as const` vs. Enums

While enums provide a way to define a set of named constants, as const offers a more intuitive and flexible approach for certain scenarios.

Example Comparison:

Using Enums:

enum Routes {
  Home = '/',
  About = '/about',
  Contact = '/contact'
}

function goToRoute(route: Routes) {
  // Logic to navigate to the route
}

goToRoute(Routes.Home);

Using as const:

const routes = {
  home: '/',
  about: '/about',
  contact: '/contact'
} as const;

type Routes = keyof typeof routes;

function goToRoute(route: Routes) {
  // Logic to navigate to the route
}

goToRoute('home'); // Type-safe and more intuitive

Benefits of as const:

Improved Type Safety: Using as const with keyof typeof ensures that only valid keys are used.
Intuitive Syntax: The syntax is straightforward and more closely aligned with JavaScript objects.
Better Autocomplete: IDEs provide better autocomplete suggestions with as const, enhancing the developer experience.

By integrating these techniques, you can effectively master immutable types with TypeScript using the as const feature. Enhance your coding skills and ensure your applications are both robust and maintainable.

For a more detailed walkthrough, check out the full video tutorial on YouTube. Happy coding!

Feel free to share this blog post with your developer community to help others improve their TypeScript skills. Engage with us on Twitter @adeelibr for more coding tips and tutorials!

Vendor splitting using webpack 4

Adeel Imran — Sun, 31 Oct 2021 11:42:30 +0000

In your webpack config file simply add this piece of code

optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin(),
    ],
    // Automatically split vendor and commons
    // https://twitter.com/wSokra/status/969633336732905474
    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    // Keep the runtime chunk seperated to enable long term caching
    // https://twitter.com/wSokra/status/969679223278505985
    runtimeChunk: true,
  },

You will need to have this webpack extension https://github.com/NMFR/optimize-css-assets-webpack-plugin

PowerShell Replace – How to Rename a File or Change a File Extension in Windows 10

Adeel Imran — Mon, 22 Feb 2021 17:52:57 +0000

Windows PowerShell is a Microsoft framework for automating tasks using a command line shell.

In this tutorial we will learn on how to change a file name or its extension using either the relative directory or absolute directory.

Here is a short 3 minute video in which I walk through how to change a file name or its extension.

We will be using Rename-Item cmdlet. You can read more in the official docs here.

Using Rename-Item we can not only rename a file but also move it into different directories or even change registry names as well.

You can find some very good official examples on the PowerShell docs page here.

So let's begin.

How to rename a file

Open your PowerShell command line shell. Type in the following command:

Rename-Item -LiteralPath "hello.xls" -NewName "bye.xls"

Rename-Item accepts two flags:

LiteralPath is the file you want to rename
NewName is the new name of the file you want

How to change a file extension

You can change the extension of a file similar to how you would rename it by simply doing this:

Rename-Item -LiteralPath "hello.txt" -NewName "hello.docx"

If you found this useful drop a message to me on twitter/adeelibr.

Happy coding.