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

"text-green-500 opacity-70">// 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;

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

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

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

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

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

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

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