TypeScript Best Practices

TypeScript has become an essential tool for JavaScript developers, providing type safety and better tooling. Here are some best practices to help you write cleaner, more maintainable TypeScript code.

Use Strict Mode

Always enable strict mode in your tsconfig.json file:

{
  "compilerOptions": {
    "strict": true
  }
}

This enables a range of type checking behaviors that catch more errors before runtime.

Define Explicit Return Types for Functions

While TypeScript can often infer return types, explicitly defining them improves documentation and prevents accidental changes:

// Good practice
function calculateTotal(items: CartItem[]): number {
  return items.reduce((total, item) => total + item.price, 0);
}

// Avoid implicit return types for public APIs
function processOrder(order) { // No explicit return type
  // ...
}

Use Interfaces for Object Shapes

Interfaces provide a clear way to define object shapes:

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

function getUserName(user: User): string {
  return user.name;
}

Leverage Union Types and Type Guards

Union types allow a value to be one of several types, and type guards help narrow down the specific type:

type Result<T> = Success<T> | Error;

interface Success<T> {
  success: true;
  data: T;
}

interface Error {
  success: false;
  error: string;
}

function handleResult<T>(result: Result<T>): T | null {
  if (result.success) {
    // TypeScript knows result is Success<T> here
    return result.data;
  } else {
    // TypeScript knows result is Error here
    console.error(result.error);
    return null;
  }
}

Use Enums for Related Constants

Enums help group related constants and improve code readability:

enum UserRole {
  Admin = 'ADMIN',
  Editor = 'EDITOR',
  Viewer = 'VIEWER'
}

function checkAccess(user: User, requiredRole: UserRole): boolean {
  return user.role === requiredRole;
}

Avoid any Type When Possible

The any type defeats TypeScript's purpose. Use more specific types or unknown if necessary:

// Avoid
function processData(data: any): any {
  // ...
}

// Better
function processData<T>(data: T): ProcessedResult<T> {
  // ...
}

// When the type truly is unknown
function processUnknownData(data: unknown): void {
  // Need type checking before using data
  if (typeof data === 'string') {
    // Now TypeScript knows data is a string
    console.log(data.toUpperCase());
  }
}

Utilize TypeScript Utility Types

TypeScript provides utility types that help with common type transformations:

interface User {
  id: string;
  name: string;
  email: string;
  password: string;
}

// Create a type without the password field
type PublicUser = Omit<User, 'password'>;

// Create a type with only id and name
type UserSummary = Pick<User, 'id' | 'name'>;

// Create a type with all fields optional
type PartialUser = Partial<User>;

// Create a type with all fields required
type RequiredUser = Required<User>;

Conclusion

Following these TypeScript best practices will help you write more maintainable, robust code with fewer runtime errors. Remember that TypeScript is a tool to help you, not a constraint - use it effectively to improve your development experience.