TypeScript Const Assertions Guide

Understanding TypeScript’s Const Assertions

TypeScript’s const assertions are a valuable tool for creating type-safe code. Introduced in TypeScript 3.4, this feature allows developers to provide an explicit type annotation to ensure that a value is treated as a literal type, rather than being widened to a more general type.

What are Const Assertions?

Const assertions are a new construct for literal values in TypeScript. The syntax is a type assertion with const in place of the type name (e.g., 123 as const). When we construct new literal expressions with const assertions, we can signal to the language that:

• No literal types in that expression should be widened (e.g., no going from “hello” to string)
• Object literals get readonly properties
• Array literals become readonly tuples

No Type Widening for Literal Types

Type widening occurs when TypeScript automatically assigns a broader type to a variable based on its initial value. With const assertions, developers can prevent type widening and ensure that the variable is assigned a specific literal type.

For example:

typescript
const x = 'x';


In this case, TypeScript assigns the literal type 'x' to the variable x. This prevents accidental reassignment and ensures type safety.

Object Literals Get Readonly Properties

Before TypeScript 3.4, type widening happened across the board with object literals. With const assertions, developers can create object literals with readonly properties.

For example:

typescript
const action = { type: 'SET_COUNT', payload: 10 } as const;


In this case, the type property is assigned a readonly literal type 'SET_COUNT', and the payload property is assigned a readonly literal type 10.

Array Literals Become Readonly Tuples

With const assertions, developers can create array literals that become readonly tuples.

For example:

typescript
const hours = [8, 12, 5, 8] as const;


In this case, the hours array is assigned a readonly tuple type [8, 12, 5, 8].

Advanced Usage of Const Assertions

Const assertions have several advanced use cases, including integration with the TypeScript declare keyword and state management libraries like Redux.

For example:

typescript
declare const BASE_URL: string;
const API_URL = `${BASE_URL}/api` as const;


In this case, the BASE_URL constant is declared using the declare keyword, and the API_URL constant is created using a const assertion.

New Feature in TypeScript 5.0: Const Type Parameters

TypeScript 5.0 introduced const type parameters, which enhance type inference for object literals.

For example:

“`typescript
function createRole

const roles = createRole([‘admin’, ‘developer’, ‘tester’] as const);
“`

In this case, the createRole function is defined with a const type parameter T, which is used to infer the type of the roleNames argument. The roles constant is created using a const assertion, which assigns a readonly tuple type ['admin', 'developer', 'tester'] to the roles variable.

Conclusion

Const assertions are a powerful feature in TypeScript that allow developers to create variables with literal types that cannot be widened. They also help reduce boilerplate code and make it easier to write and maintain complex applications. By using const assertions, developers can ensure that the correct values are used throughout the application, catching errors at compile time and avoiding runtime bugs.