Understanding TypeScript Basics

TypeScript is a superset of JavaScript that adds static type definitions. It helps catch errors early and makes your code more maintainable and self-documenting.

Why TypeScript?

TypeScript offers several advantages over plain JavaScript:

• Type Safety: Catch errors at compile time
• Better IDE Support: Autocomplete and refactoring tools
• Self-Documenting Code: Types serve as inline documentation
• Easier Refactoring: Confident code changes with type checking

Basic Types

TypeScript provides several basic types:

Primitive Types

// String
let name: string = "John";

// Number
let age: number = 30;

// Boolean
let isActive: boolean = true;

// Array
let numbers: number[] = [1, 2, 3];
let names: Array = ["John", "Jane"];

// Any (avoid when possible)
let anything: any = "can be anything";

Union Types

You can combine types using union types:

let id: string | number;
id = "123";  // OK
id = 123;    // OK
id = true;   // Error

Interfaces

Interfaces define the structure of objects:

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

const user: User = {
  name: "John",
  age: 30
};

Extending Interfaces

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};

Functions

TypeScript allows you to type function parameters and return values:

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

// Arrow function
const add = (a: number, b: number): number => {
  return a + b;
};

// Optional parameters
function createUser(name: string, age?: number): User {
  return {
    name,
    age: age || 0
  };
}

Classes

TypeScript enhances JavaScript classes with type annotations:

class Person {
  private name: string;
  protected age: number;
  public email: string;

constructor(name: string, age: number, email: string) {
    this.name = name;
    this.age = age;
    this.email = email;
  }

public getName(): string {
    return this.name;
  }
}

Generics

Generics allow you to create reusable components:

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

let output = identity("myString");
let number = identity(123);

Type Assertions

Sometimes you know more about a value than TypeScript:

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

Working with Next.js

TypeScript works seamlessly with Next.js:

// app/components/Button.tsx
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

export default function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    
      {label}
    
  );
}

Best Practices

1. Avoid any: Use specific types whenever possible
2. Use interfaces for objects: Better than inline types
3. Enable strict mode: Catch more errors
4. Use type inference: Let TypeScript infer types when obvious
5. Document complex types: Add comments for clarity

Conclusion

TypeScript is a powerful tool that can significantly improve your development experience. Start with the basics, gradually adopt more advanced features, and you'll soon appreciate the benefits of type safety in your projects.

Happy coding!