> ## 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 Addition Assignment

The `+=` (addition assignment) operator evaluates the addition or string concatenation of the right operand and the current value of the left operand, subsequently assigning the evaluated result back to the left operand.

```typescript theme={"dark"}
leftOperand += rightOperand;
```

While conceptually similar to the expanded assignment expression `leftOperand = leftOperand + rightOperand`, the `+=` operator evaluates the `leftOperand` exactly once. This distinction is critical when the left operand contains side effects (such as an incrementing index or a getter method). In an expression like `arr[i++] += 5`, the index `i` is evaluated and incremented only once, whereas the expanded form `arr[i++] = arr[i++] + 5` would evaluate the increment operation twice, yielding a completely different result.

## Type Resolution and Behavior

In TypeScript, the behavior of the `+=` operator is dictated by the types of the operands. The TypeScript compiler (`tsc`) enforces strict type checking during this operation to prevent implicit type coercion anomalies common in standard JavaScript.

1. **Numeric Addition:** If both operands are strictly of type `number`, or if both operands are strictly of type `bigint`, the operator performs standard mathematical addition. TypeScript strictly prohibits mixing `number` and `bigint` in the same operation.
2. **String Concatenation:** If either the left or right operand is of type `string`, the operator performs string concatenation.
3. **Type Assignability:** TypeScript verifies that the return type of the evaluated expression is assignable to the declared type of the `leftOperand`. If it is not, the compiler emits a type error.

## Syntax Visualization

**Evaluation Semantics:**

```typescript theme={"dark"}
let i = 0;
const arr = [10, 20];
arr[i++] += 5; 
// 'i' is evaluated and incremented only once. arr[0] becomes 15.
```

**Valid Numeric Assignment:**

```typescript theme={"dark"}
let numericValue: number = 10;
numericValue += 5; // Evaluates to 15. Type remains 'number'.

let bigIntValue: bigint = 10n;
bigIntValue += 5n; // Evaluates to 15n. Type remains 'bigint'.
```

**Valid String Concatenation:**

```typescript theme={"dark"}
let stringValue: string = "foo";
stringValue += "bar"; // Evaluates to "foobar". Type remains 'string'.
```

**Compiler Error (Mixing BigInt and Number):**

```typescript theme={"dark"}
let numericBase: number = 10;
numericBase += 5n;
// TS Compiler Error: Operator '+=' cannot be applied to types 'number' and 'bigint'.
```

**Compiler Error (Type Assignability Mismatch):**

```typescript theme={"dark"}
let strictNumber: number = 10;
strictNumber += "5"; 
// TS Compiler Error: Type 'string' is not assignable to type 'number'.
// (10 + "5" evaluates to the string "105", which cannot be assigned back to a number).
```

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