10 TypeScript Tips Every Developer Should Know

TypeScript has become the go-to language for type-safe JavaScript development. Here are 10 essential tips to level up your TypeScript skills.

1. Use Union Types Effectively

Union types allow you to combine multiple types:

typescriptCopy
type Status = 'loading' | 'success' | 'error';

interface ApiResponse<T> {
  data: T;
  status: Status;
}

2. Leverage Generic Types

Create reusable components and functions with generics:

typescriptCopy
interface Repository<T> {
  id: string;
  data: T;
  save: (item: T) => void;
  find: (id: string) => T | undefined;
}

class UserRepository implements Repository<User> {
  // Implementation
}

3. Use Type Guards

Type guards help TypeScript narrow down types:

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

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

4. Master Mapped Types

Transform existing types into new ones:

typescriptCopy
type Optional<T> = {
  [P in keyof T]?: T[P];
};

type Required<T> = {
  [P in keyof T]-?: T[P];
};

5. Use Conditional Types

Create types that depend on other types:

typescriptCopy
type NonNullable<T> = T extends null | undefined ? never : T;

type ApiResponse<T> = T extends string 
  ? { message: T } 
  : { data: T };

6. Implement Utility Types

TypeScript provides built-in utility types:

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

type UserWithoutPassword = Omit<User, 'password'>;
type UserPartial = Partial<User>;
type UserRequired = Required<User>;

7. Use Template Literal Types

Create powerful string manipulations at the type level:

typescriptCopy
type EventName = `on${Capitalize<string>}`;

type ButtonEvents = {
  onClick: MouseEvent;
  onFocus: FocusEvent;
  onBlur: FocusEvent;
};

8. Leverage const Assertions

Create immutable arrays and objects:

typescriptCopy
const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number]; // 'red' | 'green' | 'blue'

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
} as const;

9. Use Recursive Types

Define types that reference themselves:

typescriptCopy
type JsonValue = 
  | string
  | number
  | boolean
  | null
  | JsonArray
  | JsonObject;

interface JsonArray extends Array<JsonValue> {}
interface JsonObject {
  [key: string]: JsonValue;
}

10. Implement Brand Types

Create nominal types for better type safety:

typescriptCopy
type UserId = string & { readonly brand: unique symbol };
type Email = string & { readonly brand: unique symbol };

function createUserId(id: string): UserId {
  return id as UserId;
}

function sendEmail(to: Email, message: string) {
  // Implementation
}

Conclusion

These TypeScript tips will help you write more type-safe, maintainable, and scalable code. Start incorporating them into your projects and see the difference!