> ## 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 Type-Annotated Variable

A type-annotated variable in TypeScript is an identifier explicitly bound to a specific data type using a colon (`:`) syntax. This explicit declaration instructs the TypeScript compiler to enforce static typing rules, ensuring that only values conforming to the specified type signature can be assigned to the variable during the compilation phase.

## Syntax

The structural pattern for a type-annotated variable consists of the declaration keyword, the identifier, the colon token, the type annotation, and an optional initialization.

```text theme={"dark"}
// General signature
<keyword> <identifier>: <TypeAnnotation> = <value>;

// Uninitialized declaration
let <identifier>: <TypeAnnotation>;
```

## Technical Mechanics

* **Static Type Checking:** The TypeScript compiler (TSC) uses the annotation to validate assignments and operations associated with the variable via the Abstract Syntax Tree (AST). If a value's type does not satisfy the annotated type contract, the compiler emits a compile-time diagnostic error (e.g., `TS2322: Type 'X' is not assignable to type 'Y'`).
* **Type Erasure:** Type annotations are strictly compile-time constructs. During transpilation, the TypeScript compiler strips the colon and the type identifier from the emitted JavaScript code. The annotations have zero runtime footprint.
* **Overriding Inference:** When a variable is initialized simultaneously with its declaration, TypeScript typically infers the type. Providing an explicit type annotation overrides the compiler's default type inference algorithm, forcing the variable to adhere strictly to the developer-defined type constraint (e.g., widening or narrowing the type).

## Annotation Categories

Type annotations can range from primitive data types to complex, composite structures.

**Primitives**
Annotations for fundamental JavaScript types.

```typescript theme={"dark"}
let isActive: boolean = true;
const maxRetries: number = 5;
let endpointUrl: string = "https://api.example.com";
```

**Arrays and Tuples**
Annotations defining collections, either by uniform type or fixed-length/fixed-type structures.

```typescript theme={"dark"}
// Array syntax
let byteStream: number[] = [0, 1, 1, 0];
let stringBuffer: Array<string> = ["chunk1", "chunk2"];

// Tuple syntax (fixed length and types)
let coordinate: [number, number, string] = [10.5, 20.1, "z-axis"];
```

**Object Literals**
Inline structural typing defining the exact shape, properties, and value types of an object.

```typescript theme={"dark"}
let configuration: { 
    host: string; 
    port: number; 
    secure?: boolean; // Optional property
} = {
    host: "localhost",
    port: 8080
};
```

**Unions and Intersections**
Annotations that combine multiple types into a single variable contract.

```typescript theme={"dark"}
// Union: Variable can be one of multiple types
let processId: string | number = 1024;

// Intersection: Variable must satisfy multiple type contracts simultaneously
type HasId = { id: string };
type HasTimestamps = { createdAt: Date; updatedAt: Date };

let entity: HasId & HasTimestamps;
```

**Function Signatures**
Annotating a variable that holds a function reference, defining both the parameter types and the return type.

```typescript theme={"dark"}
let calculateHash: (payload: string, salt: number) => string;
```

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