> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Literal Type

A literal type in TypeScript is a type that represents one exact, specific primitive value rather than a broader category of values. By specifying a literal type, the compiler restricts a variable to hold only that exact value, effectively narrowing the domain of a collective primitive type (such as `string`, `number`, or `boolean`) to a single instance. A literal type is a strict subtype of its corresponding primitive type.

## Core Literal Types

TypeScript supports literal types for three primary primitives: strings, numbers, and booleans.

```typescript theme={"dark"}
// String Literal Type
let exactString: "Hello";
exactString = "Hello"; // Valid
exactString = "World"; // Type Error: Type '"World"' is not assignable to type '"Hello"'.

// Numeric Literal Type
let exactNumber: 42;
exactNumber = 42; // Valid
exactNumber = 50; // Type Error: Type '50' is not assignable to type '42'.

// Boolean Literal Type
let exactBoolean: true;
exactBoolean = true;  // Valid
exactBoolean = false; // Type Error: Type 'false' is not assignable to type 'true'.
```

## Type Inference and Widening

TypeScript's type inference engine handles literal types differently depending on how a variable is declared. This behavior is governed by a concept called **literal widening**.

When a variable is declared with `let` or `var`, the compiler assumes the value may change. Therefore, it widens the inferred type from the literal value to the underlying primitive type. When declared with `const`, the compiler guarantees the value cannot be reassigned, so it infers the exact literal type.

```typescript theme={"dark"}
// Widened Inference
let widenedString = "TypeScript"; // Inferred type: string
let widenedNumber = 100;          // Inferred type: number

// Narrowed (Literal) Inference
const narrowedString = "TypeScript"; // Inferred type: "TypeScript"
const narrowedNumber = 100;          // Inferred type: 100
```

## Template Literal Types

TypeScript allows the construction of new string literal types by interpolating existing string literal types using template literal syntax at the type level. When combined with unions, template literal types distribute over the union members to generate a cross-product of exact string literals.

```typescript theme={"dark"}
type Prefix = "api" | "web";
type Action = "read" | "write";

// Distributes to: "api_read" | "api_write" | "web_read" | "web_write"
type Endpoint = `${Prefix}_${Action}`; 
```

## The `as const` Assertion (Const Assertions)

To prevent literal widening in complex data structures like objects or arrays, TypeScript provides the `as const` assertion. Applying `as const` instructs the compiler to:

1. Infer exact literal types for all properties or elements.
2. Recursively apply the `readonly` modifier to all properties.
3. Treat arrays as `readonly` tuples rather than mutable arrays of a widened type.

```typescript theme={"dark"}
// Without 'as const'
const defaultObject = {
  protocol: "https",
  port: 443
}; 
// Inferred type: { protocol: string; port: number; }

// With 'as const'
const strictObject = {
  protocol: "https",
  port: 443
} as const; 
// Inferred type: { readonly protocol: "https"; readonly port: 443; }

// Array with 'as const'
const strictArray = [1, 2, 3] as const;
// Inferred type: readonly [1, 2, 3]
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
