TypeScript Tips and Tricks

TypeScript has become the standard for building robust JavaScript applications. Here are some practical tips to improve your TypeScript code quality.

Use Type Guards for Runtime Safety

Type guards help TypeScript narrow types at runtime:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript knows value is string here
    console.log(value.toUpperCase());
  }
}

Leverage Utility Types

TypeScript provides powerful utility types:

// Make all properties optional
type PartialUser = Partial<User>;

// Pick specific properties
type UserEmail = Pick<User, "email" | "name">;

// Omit properties
type UserWithoutId = Omit<User, "id">;

Discriminated Unions for Better Type Safety

Use discriminated unions for handling different data shapes:

type Success = { status: "success"; data: string };
type Error = { status: "error"; message: string };
type Result = Success | Error;

function handleResult(result: Result) {
  if (result.status === "success") {
    // TypeScript knows result.data exists
    console.log(result.data);
  } else {
    // TypeScript knows result.message exists
    console.error(result.message);
  }
}

Avoid any, Use unknown Instead

When you don’t know the type, use unknown instead of any:

// Bad
function process(data: any) {
  return data.something; // No type safety
}

// Good
function process(data: unknown) {
  if (typeof data === "object" && data !== null && "something" in data) {
    return (data as { something: string }).something;
  }
}

Conclusion

These patterns will help you write more maintainable and type-safe TypeScript code. Remember: TypeScript is about catching errors at compile time, not runtime!