Mastering TypeScript: From Basics to Advanced Types

TypeScript has become the de facto standard for building scalable JavaScript applications. In this comprehensive guide, we'll explore TypeScript from the ground up.

Why TypeScript?

TypeScript provides static typing, better tooling, and catches errors at compile time rather than runtime. Here's a simple example:

// Without TypeScript - runtime error
function greet(name) {
  return `Hello, ${name.toUpperCase()}`;
}
greet(123); // Runtime error!

// With TypeScript - compile-time error
function greet(name: string): string {
  return `Hello, ${name.toUpperCase()}`;
}
greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

Basic Types

TypeScript offers several built-in types:

let isDone: boolean = false;
let count: number = 42;
let username: string = "Romeo";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];

Interfaces and Type Aliases

Define object shapes using interfaces:

interface User {
  id: string;
  name: string;
  email: string;
  age?: number; // Optional property
}

const user: User = {
  id: "123",
  name: "Romeo Mukula",
  email: "romeo@example.com"
};

Generics

Generics allow you to write reusable code:

function identity<T>(arg: T): T {
  return arg;
}

const output1 = identity<string>("Hello");
const output2 = identity<number>(42);

Advanced: Utility Types

TypeScript provides powerful utility types:

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

// Make all properties optional
type PartialTodo = Partial<Todo>;

// Make all properties readonly
type ReadonlyTodo = Readonly<Todo>;

// Pick specific properties
type TodoPreview = Pick<Todo, "title" | "completed">;

// Omit specific properties
type TodoInfo = Omit<Todo, "completed">;

Conclusion

TypeScript is a powerful tool that enhances JavaScript development. Start with basic types, gradually adopt interfaces and generics, and eventually leverage advanced patterns.

Happy coding! 🚀