> ## 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 Left Shift

The `<<` (Left Shift) operator is a binary bitwise operator that shifts the binary representation of its left operand to the left by the number of bits specified by its right operand. In TypeScript, the operator's mechanical behavior depends entirely on whether the operands are of type `number` or `bigint`.

## Syntax

```typescript theme={"dark"}
expression1 << expression2
```

## Execution Mechanics: `number` Operands

When both operands are of type `number`, the operator adheres to the following 32-bit integer semantics:

1. **Type Coercion:** Both operands are implicitly converted to 32-bit signed integers (`Int32`) using two's complement representation. Any fractional parts are truncated.
2. **Right Operand Masking (Modulo 32):** The shift amount is strictly evaluated as `expression2 & 0x1F` (equivalent to `expression2 % 32`). Attempting to shift by 32 bits or more wraps around. For example, shifting by 33 is identical to shifting by 1.
3. **Bit Shifting & Zero-Fill:** The bits of the left operand are moved to the left. Vacated bit positions on the right are filled with zeroes (`0`).
4. **Discard & Sign Inversion:** Bits shifted beyond the 32nd bit boundary on the left are permanently discarded. Because the result is constrained to a 32-bit *signed* integer, shifting a `1` into the most significant bit (MSB, the 32nd bit) alters the sign of the resulting number, yielding a negative value.
5. **Return:** The operation evaluates to a standard TypeScript `number`.

## Execution Mechanics: `bigint` Operands

When both operands are of type `bigint`, the operator scales to arbitrary-precision integers:

1. **No 32-bit Truncation:** The operation does not coerce values to 32-bit integers. The binary representation grows as needed to accommodate the shifted value.
2. **No Masking:** The right operand is not subjected to a modulo 32 operation. `1n << 33n` will literally shift the bit 33 positions to the left.
3. **No Discarding:** Bits are never discarded beyond a boundary.
4. **Return:** The operation evaluates to a `bigint`.

*(Note: The right operand must evaluate to a non-negative `bigint`, otherwise a runtime `RangeError` is thrown).*

## TypeScript Static Type Checking

Unlike JavaScript's runtime semantics—which implicitly coerce non-numeric types like `undefined` or `null` to `0`—TypeScript's static type checker strictly forbids this.

* **Valid Types:** Operands must be of type `number`, `bigint`, `any`, or an `enum`.
* **Type Mixing:** TypeScript forbids mixing `number` and `bigint` across the operator. Attempting `1n << 2` results in `TS2365: Operator '<<' cannot be applied to types 'bigint' and 'number'`.
* **Non-Numeric Operands:** Attempting to use types like `undefined`, `string`, or `boolean` will throw a compilation error: `TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.`

## Mathematical Equivalence

Mechanically, `a << b` yields the exact integer result of $a \times 2^b$. For `number` types, this equivalence only holds true provided the operation does not trigger a 32-bit overflow. For `bigint` types, this mathematical equivalence is absolute.

## Code Visualization

```typescript theme={"dark"}
// --- NUMBER OPERANDS 

// Standard left shift
// 5 in binary:      00000000000000000000000000000101
// Shifted left 2:   00000000000000000000000000010100 (20 in decimal)
const a: number = 5 << 2; // Evaluates to 20

// Floating-point truncation (5.9 -> 5, 2.8 -> 2)
const b: number = 5.9 << 2.8; // Evaluates to 20

// Modulo 32 behavior (33 & 31 = 1)
const c: number = 5 << 33; // Evaluates to 10 (same as 5 << 1)

// Sign bit overflow (32-bit signed integer boundary)
// 1 in binary:      00000000000000000000000000000001
// Shifted left 31:  10000000000000000000000000000000 (-2147483648 in decimal)
const d: number = 1 << 31; // Evaluates to -2147483648


// --- BIGINT OPERANDS 

// Arbitrary precision (No modulo 32, no 32-bit discard)
const e: bigint = 1n << 33n; // Evaluates to 8589934592n
const f: bigint = 5n << 2n;  // Evaluates to 20n


// --- TYPESCRIPT COMPILER ERRORS 

// TS2365: Operator '<<' cannot be applied to types 'bigint' and 'number'.
const err1 = 1n << 2; 

// TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
const err2 = undefined << 2; 
```

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