TypeScript Guide

TypeScriptJavaScript with Syntax for Types

TypeScript adds static type definitions to JavaScript. Learn how to write type-safe, scalable code.

🎯 Core Concept: Type Safety

TypeScript adds static type checking to JavaScript. Types help catch errors at compile-time instead of runtime, provide better IDE support, and serve as documentation. TypeScript types are erased at runtime - they exist only during development.

TypeScript Code

Write with types

Type Checking

Compiler validates

JavaScript Output

Types removed

Runtime

Runs as JavaScript

Basic Types

Learn the fundamental types TypeScript provides for annotating your code and catching errors early.

String

Text data type

let name: string = 'TypeScript';

let name : string = 'TypeScript';

Number

Numeric data type (integers and floats)

let age: number = 30;

let age : number = 30;

Boolean

True or false values

let isActive: boolean = true;

let isActive : boolean = true;

Array

Collection of elements

let numbers: number[] = [1, 2, 3];

let numbers : number[] = [1, 2, 3];

Type Hierarchy

Primitives

string

number

boolean

Collections

Array<T>

Object

Tuple

Special

any

void

null

Composite

Union (|)

Intersection (&)

Generic

Type System Fundamentals

TypeScript provides a rich type system. Start with basic types and build up to complex types.

typescript

// Primitive Types
"text-blue-400">let name: "text-purple-400">string = "TypeScript";
"text-blue-400">let age: "text-purple-400">number = 30;
"text-blue-400">let isActive: "text-purple-400">boolean = "text-purple-400">true;

// Array Types
"text-blue-400">let items: "text-purple-400">string[] = ["apple", "banana"];
"text-blue-400">let numbers: "text-purple-400">number[] = [1, 2, 3, 4, 5];
// Or: Array<number> = [1, 2, 3]

// Object Types
"text-blue-400">let user: "text-pink-400">{ name: "text-purple-400">string; age: "text-purple-400">number "text-pink-400">} = "text-pink-400">{ 
  name: "John", 
  age: 30 
"text-pink-400">};

// Type Inference - TypeScript guesses the type
"text-blue-400">let inferredString = "Hello"; // Type: string (inferred)
"text-blue-400">let inferredNumber = 42; // Type: number (inferred)
"text-blue-400">let inferredArray = [1, 2, 3]; // Type: number[] (inferred)

// Explicit typing is optional when TypeScript can infer
"text-blue-400">let explicit: "text-purple-400">string = "Hello"; // ✅ Explicit
"text-blue-400">let inferred = "Hello"; // ✅ Also string, but inferred

// Special Types
"text-blue-400">let anything: "text-purple-400">any = "can be anything"; // ⚠️ Avoid - loses type safety
"text-blue-400">let nothing: "text-purple-400">void = "text-purple-400">undefined; // For functions that return nothing
"text-blue-400">let nullValue: "text-purple-400">null = "text-purple-400">null;
"text-blue-400">let undefinedValue: "text-purple-400">undefined = "text-purple-400">undefined;

// Union Types - Value can be one of several types
"text-blue-400">let id: "text-purple-400">string | "text-purple-400">number;
id = "123"; // ✅ OK
id = 123; // ✅ OK
id = "text-purple-400">true; // ❌ Error: boolean not allowed

// Practical Union Type Example
"text-blue-400">function formatId(id: "text-purple-400">string | "text-purple-400">number): "text-purple-400">string "text-pink-400">{
  "text-blue-400">if ("text-blue-400">typeof id === '"text-purple-400">string') "text-pink-400">{
    "text-blue-400">return id.toUpperCase();
  "text-pink-400">}
  "text-blue-400">return id.toString();
"text-pink-400">}