TypeScript Primitives & Explicit Type Annotations

1. Why Static Types Matter

JavaScript is dynamically typed, meaning variables can change their data type at runtime without warning. TypeScript extends JavaScript by adding a compile-time type system that catches type mismatch bugs before your code ever runs in production.

2. Explicit Type Annotations

A type annotation uses a colon (:) followed by the type name after a variable declaration:

const username: string = "Alex";
const userAge: number = 28;
const isPremiumUser: boolean = true;
const secretKey: symbol = Symbol("auth");
const bigQuantity: bigint = 9007199254740991n;

// Function parameters with explicit types
function formatUser(name: string, age: number): string {
  return `User: ${name}, Age: ${age}`;
}

console.log(formatUser(username, userAge));

3. Visual Compile-Time vs Runtime Layer

TypeScript types exist ONLY during development and compilation. They are completely erased when compiling down to plain JavaScript:

[ TypeScript Layer (Compile Time) ]  ──> Type Checking & IDE Autocomplete
                 │ (Type Erasure)
                 ▼
[ JavaScript Layer (Runtime Time) ]   ──> Executable V8 Engine Code

4. The Special Primitives: null & undefined

In TypeScript, null and undefined have their own distinct types:

let pendingData: undefined = undefined;
let emptyRef: null = null;

5. Common Mistakes

• Over-annotating Obvious Code: Annotating every single variable (like const x: number = 5) adds visual noise. Let TypeScript infer obvious primitives automatically!
• Confusing Capitalized Wrapper Types: Writing String or Number instead of lowercase primitive types (string, number) refers to JavaScript object wrapper classes, not primitive values. Always use lowercase type annotations.

6. Next Steps

Explicit type annotations define clear contracts. Next, let's explore Automatic Type Inference and Const Assertions!