> ## 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 Less Than

The `<` (less than) operator is a relational binary operator that evaluates whether its left operand is strictly lesser in value than its right operand, yielding a `boolean` result. TypeScript enhances this standard JavaScript operator by applying static type checking to the operands, preventing unsafe cross-type comparisons that rely on implicit type coercion.

**Syntax**

```typescript theme={"dark"}
leftOperand < rightOperand
```

**Type Evaluation Rules**
TypeScript restricts the `<` operator to specific types. Both operands must be of a mutually comparable type. Valid types include `number`, `string`, `bigint`, `Date`, `enum`, and `any`.

* **Numeric Evaluation:** When operands are `number`, `bigint`, or numeric `enum` types, the operator performs a standard mathematical comparison.
* **Lexicographical Evaluation:** When operands are `string` types, the operator compares the sequence of 16-bit unsigned integer values (UTF-16 code units) from left to right.
* **Date Evaluation:** When both operands are `Date` instances, TypeScript permits the comparison natively. At runtime, JavaScript implicitly calls the `valueOf()` method on the objects, comparing their numeric epoch timestamps.
* **Any Evaluation:** If one or both operands are of type `any`, the compiler bypasses strict type checking, deferring to JavaScript's runtime abstract relational comparison algorithm.

**Code Visualization**

```typescript theme={"dark"}
// Valid: Numeric comparison
const isLessNum: boolean = 5 < 10; // true

// Valid: BigInt comparison
const isLessBigInt: boolean = 100n < 200n; // true

// Valid: Lexicographical string comparison
const isLessStr: boolean = "apple" < "banana"; // true

// Valid: Date comparison
const date1 = new Date("2023-01-01");
const date2 = new Date("2023-12-31");
const isLessDate: boolean = date1 < date2; // true

// Valid: Enum comparison
enum Priority { Low, Medium, High }
const isLessEnum: boolean = Priority.Low < Priority.High; // true
```

**Compiler Restrictions**
If you attempt to compare incompatible types, or attempt to use the `<` operator on unsupported complex types like plain objects or arrays, the TypeScript compiler rejects the operation and emits error `TS2365`. This is a strict compiler rule designed to prevent the unpredictable type coercion inherent to the underlying JavaScript engine.

```typescript theme={"dark"}
const num: number = 5;
const str: string = "10";

// TS2365: Operator '<' cannot be applied to types 'number' and 'string'.
const invalidPrimitiveComparison = num < str; 

const obj1 = { val: 1 };
const obj2 = { val: 2 };

// TS2365: Operator '<' cannot be applied to types '{ val: number; }' and '{ val: number; }'.
const invalidObjectComparison = obj1 < obj2;
```

To resolve type mismatch errors, explicit type casting or property extraction is required to yield valid, mutually comparable types before evaluation.

```typescript theme={"dark"}
// Validated through explicit conversion
const validStringComparison: boolean = num < Number(str);

// Validated through property extraction
const validObjectComparison: boolean = obj1.val < obj2.val;
```

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