TypeScript Best Practices for Better Code

Why TypeScript?

TypeScript has transformed how I write JavaScript. The benefits are clear:

• Early Error Detection - Catch bugs before runtime
• Better IDE Support - Autocomplete and IntelliSense
• Code Documentation - Types serve as documentation
• Refactoring Confidence - Safe code changes

Essential Best Practices

1. Enable Strict Mode

Always use strict mode in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

2. Use Type Inference

Let TypeScript infer types when possible:

// Good
const name = "Adam";  // TypeScript knows it's string

// Unnecessary
const name: string = "Adam";

3. Define Interfaces for Objects

Create clear contracts for your data:

interface User {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user';  // Optional with union type
}

4. Use Union Types

Be specific with your types:

type Status = 'pending' | 'approved' | 'rejected';
type Result = Success | Error;

5. Leverage Utility Types

TypeScript provides powerful utility types:

type Partial<User>;    // All properties optional
type Pick<User, 'id' | 'name'>;  // Select specific properties
type Readonly<User>;   // Immutable object

Common Pitfalls to Avoid

1. Avoid any

Using any defeats the purpose of TypeScript:

// Bad
function process(data: any) { }

// Good
function process<T>(data: T) { }

2. Don’t Ignore Errors

Never use @ts-ignore without good reason:

// Bad
// @ts-ignore
const result = dangerousOperation();

// Good - fix the type issue
const result = dangerousOperation() as SafeType;

3. Type vs Interface

Know when to use each:

• Interfaces - For object shapes, extensible
• Types - For unions, primitives, more flexible

Real-World Example

Here’s how I structure my TypeScript projects:

// types/portfolio.ts
export interface Project {
  id: string;
  title: string;
  description: string;
  technologies: string[];
  links: {
    demo?: string;
    github?: string;
  };
}

export interface Profile {
  name: string;
  title: string;
  email: string;
  projects: Project[];
}

// Usage
const portfolio: Profile = {
  // TypeScript ensures all required fields are present
  // and have correct types
};

Conclusion

TypeScript significantly improves code quality and developer experience. The key is to:

1. Start with strict mode
2. Let TypeScript do the heavy lifting
3. Define clear interfaces
4. Avoid any like the plague
5. Use utility types effectively

Happy typing! 🚀