Learn how TypeScript adds static typing to JavaScript primitive types using explicit colon annotations to catch bugs at compile time.
Average 5.0 by 1 learner
Master typed array lists, fixed-length tuples, and readonly modifiers to enforce immutable data structures in TypeScript.
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.
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));
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
In TypeScript, null and undefined have their own distinct types:
let pendingData: undefined = undefined;
let emptyRef: null = null;
const x: number = 5) adds visual noise. Let TypeScript infer obvious primitives automatically!String or Number instead of lowercase primitive types (string, number) refers to JavaScript object wrapper classes, not primitive values. Always use lowercase type annotations.Explicit type annotations define clear contracts. Next, let's explore Automatic Type Inference and Const Assertions!