DEV Community

Cover image for Mastering Literal Types in TypeScript: true as const vs true
Harsh Mangalam
Harsh Mangalam

Posted on

Mastering Literal Types in TypeScript: true as const vs true

#typescript #webdev #javascript #react

In TypeScript, there is a significant difference between the two statements:

  1. clientLoader.hydrate = true as const;

  2. clientLoader.hydrate = true;

FYI I have picked these example from React router v7.

Let’s break down the difference with detailed explanations and examples

  1. clientLoader.hydrate = true as const;

The as const assertion in TypeScript is a way of telling the TypeScript compiler to treat a value as its literal type, rather than the general type.
In this case, true as const means that the type of hydrate will be the literal true and not boolean. It essentially locks the value of hydrate to true specifically.

Example:

interface ClientLoader { hydrate: true; // The type of hydrate is set to the literal value `true` } const clientLoader: ClientLoader = { hydrate: true as const, }; clientLoader.hydrate = true; // This is valid // clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'
Enter fullscreen mode Exit fullscreen mode

  • In the above example, clientLoader.hydrate is specifically typed as true. You cannot assign any value other than true to hydrate because of the as const assertion.

  • This type of assignment is useful when you want to enforce immutability for certain properties.

  1. clientLoader.hydrate = true;

Without the as const assertion, TypeScript will infer the type of hydrate as boolean. This means that hydrate can be assigned any boolean value (true or false).

Example:

interface ClientLoader { hydrate: boolean; // The type of hydrate is set to `boolean` } const clientLoader: ClientLoader = { hydrate: true, }; clientLoader.hydrate = true; // This is valid clientLoader.hydrate = false; // This is also valid
Enter fullscreen mode Exit fullscreen mode

  • In this case, since hydrate is typed as boolean, you can assign true or false to it.

  • It provides flexibility to switch between both true and false.

Feature clientLoader.hydrate = true as const; clientLoader.hydrate = true;
Type of hydrate true (literal type) boolean (general type)
Flexibility Can only be true Can be true or false
Use Case When you want the property to be strictly true and not allow changes When the property can hold any boolean value
Type Inference The type of hydrate is narrowed to true The type of hydrate is inferred as boolean

Why Use as const?

  1. Enforcing Immutability: as const locks down the value so that it can’t be changed to something else. This is particularly useful when you want to ensure that a specific value is always the same throughout the program.

  2. Literal Types for Discriminated Unions: When working with discriminated unions, as const allows you to create specific cases based on literal types, as shown below:

type Status = 'pending' | 'completed' | 'failed'; const status: Status = 'pending'; // 'pending' is a valid value // status = 'in-progress'; // Error: Type '"in-progress"' is not assignable to type 'Status' // With 'as const' const taskStatus = 'pending' as const; // Now taskStatus is narrowed down to the literal type 'pending'
Enter fullscreen mode Exit fullscreen mode

Conclusion

  1. Use as const when you want to assign a specific literal value to a property and enforce that the value remains fixed.

  2. Use regular assignment (true, false, etc.) when you want to allow a property to accept different boolean values or when the exact value doesn’t need to be restricted.

This makes as const a useful tool for more precise typing and enforcing stricter value constraints in your TypeScript code.

Top comments (0)