Mastering Literal Types in TypeScript: true as const vs true

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'

• 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

• 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.

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'

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.