Boost Your Productivity with TypeScript Snippets

Ever felt like you’re typing the same TypeScript code over and over? Let’s change that today. I’ve been working with TypeScript for years, and I’m excited to share some game-changing snippets that have seriously boosted my coding efficiency.

The Power of Custom Type Guards

One of my favorite TypeScript patterns is creating custom type guards. Instead of writing lengthy type checks repeatedly, I use this snippet:

const isNonNullable = \<T\>(value: T): value is NonNullable\<T\> => {
  return value !== null && value !== undefined;
};

// Usage
const items: (string | null)[] = ['hello', null, 'world'];
const validItems = items.filter(isNonNullable); // Type is string[]

Record Type Helper

When working with object mappings, this snippet saves me countless keystrokes:

type ApiEndpoints = Record<'users' | 'posts' | 'comments', string>;

const api: ApiEndpoints = {
  users: '/api/users',
  posts: '/api/posts',
  comments: '/api/comments'
};

Utility Type Combinations

Here’s a powerful snippet that combines utility types to create flexible interfaces:

type PartialPick<T, K extends keyof T> = Partial<Pick\<T, K\>>;

interface User {
  id: number;
  name: string;
  email: string;
  settings: object;
}

type UserUpdatePayload = PartialPick<User, 'name' | 'email'>;

Generic Error Handling

This snippet has saved me countless hours when dealing with async operations:

const tryCatchWrapper = async \<T\>(
  promise: Promise\<T\>
): Promise<[T | null, Error | null]> => {
  try {
    const data = await promise;
    return [data, null];
  } catch (error) {
    return [null, error as Error];
  }
};

// Usage
const [data, error] = await tryCatchWrapper(fetchUserData(userId));

These snippets are just the beginning of what’s possible with TypeScript. By incorporating them into your workflow, you’ll notice an immediate boost in your development speed and code quality. Remember, the key to productivity isn’t just about writing code faster – it’s about writing smarter.