Back to Blog
Tutorial2025-01-18

TypeScript for JavaScript Developers: Getting Started

A practical introduction to TypeScript for JavaScript developers — types, interfaces, generics, and migration tips.

Why TypeScript?

TypeScript adds static types to JavaScript, catching errors at compile time instead of runtime. It is now used by most major JavaScript projects.

Basic Types

``typescript let name: string = 'Alice'; let age: number = 28; let active: boolean = true; let items: string[] = ['a', 'b', 'c']; let tuple: [string, number] = ['Alice', 28]; let anything: any = 42; // Avoid when possible let unknown: unknown = 42; // Safer than any `

Interfaces and Types

`typescript interface User { id: string; name: string; email: string; age?: number; // Optional readonly createdAt: Date; // Can't be reassigned }

type Status = 'active' | 'inactive' | 'pending'; // Union type

type ApiResponse = { data: T; status: number; message: string; }; `

Functions

`typescript function greet(name: string): string { return \Hello, \${name}!\; }

const add = (a: number, b: number): number => a + b;

// Optional and default parameters function createUser(name: string, age?: number, role = 'user'): User { return { id: crypto.randomUUID(), name, age, role, createdAt: new Date() }; } `

Generics

`typescript function first(arr: T[]): T | undefined { return arr[0]; }

first(['a', 'b', 'c']); // 'a' first([1, 2, 3]); // 1 (type inferred)

// Generic interface interface Repository { findById(id: string): Promise; findAll(): Promise; create(item: Omit): Promise; update(id: string, item: Partial): Promise; delete(id: string): Promise; } `

Utility Types

`typescript interface User { id: string; name: string; email: string; age: number; }

type PartialUser = Partial; // All properties optional type RequiredUser = Required; // All properties required type UserPreview = Pick; // Only id and name type UserUpdate = Omit; // Everything except id type ReadonlyUser = Readonly; // All properties readonly type UserRecord = Record; // { [key: string]: User } `

Migration Tips

1. Start with tsconfig.json: Set strict: true for maximum safety 2. Rename files gradually: .js to .ts, fix errors as you go 3. Use any temporarily for complex types, then refine later 4. Enable allowJs` to mix JS and TS files during migration 5. Type your APIs first — interfaces for requests/responses provide the most value

Summary

TypeScript is JavaScript with superpowers. Start by adding types to function signatures and interfaces to data shapes. The type safety will catch bugs before they reach your users.