Forem: epresas

Level Up Your TypeScript: Advanced Patterns Every Frontend Dev Should Know

epresas — Wed, 21 Jan 2026 23:13:34 +0000

TypeScript is a powerful tool for building reliable and maintainable frontend applications. Beyond the basic string and number, advanced patterns can drastically reduce runtime errors, improve autocompletion, and make your code easier to scale.

Here are five patterns I’ve found particularly useful in real-world projects.

1. Generic API Response Typing

When working with APIs, defining a reusable generic type for responses can save time and prevent type mismatches.

// GOOD: Generic response type
type ApiResponse<T> = {
  data: T;
  status: number;
  error?: string;
};

// Example usage:
type User = { id: string; name: string };
const response: ApiResponse<User[]> = await fetchUsers();

// TypeScript knows response.data is User[]
response.data.forEach(user => {
  console.log(user.id); // ✅ autocompletion works, safe
  console.log(user.name); // ✅ autocompletion works
});

// BAD: Loose typing
const badResponse = await fetchUsers();
// TypeScript treats data as 'any'
badResponse.data.forEach(user => {
  console.log(user.id); // ❌ no autocompletion, potential runtime error if user.id undefined
  console.log(user.name); // ❌ same
});

Why it matters:

Reusable across endpoints
Strong typing prevents misusing response data
IDE tooling like autocompletion works properly

2. Conditional Types for Flexible Props

Conditional types are particularly useful in React when a component’s props need to change shape based on a certain flag or mode. Instead of defining multiple similar interfaces or manually checking props at runtime, TypeScript can enforce correct usage at compile time, making your components safer and more predictable.

type ButtonProps<T extends 'submit' | 'link'> = 
  T extends 'submit' ? { type: 'submit'; onClick: () => void } :
  { href: string };

// GOOD: conditional type ensures correct props
const submitBtn: ButtonProps<'submit'> = { type: 'submit', onClick: () => console.log('submitted') };
const linkBtn: ButtonProps<'link'> = { href: '/home' };

// BAD: using a loose type
const looseBtn: any = { type: 'submit' };
// IDE won't warn, autocompletion doesn't work
looseBtn.onClick(); // ❌ may crash at runtime

Why it matters:

Compile-time safety: cannot pass props that don’t belong to the selected type
Better developer experience: autocompletion knows exactly which props are allowed
Easier maintenance: fewer runtime checks and less boilerplate code

3. Mapped Types for Transformations

Mapped types let you transform an existing type into a new one, applying changes consistently to all properties. This is useful when you want to make all properties read-only, optional, or change their type without rewriting interfaces for each variation.

type ReadonlyUser = {
  readonly [K in keyof User]: User[K]
};

const user: ReadonlyUser = { id: '1', name: 'Ed' };
user.id = '2'; // ❌ Error: cannot assign to 'id', it's readonly

// BAD: without mapped types
const badUser = { id: '1', name: 'Ed' };
badUser.id = '2'; // ✅ compiles fine, risk of accidental mutation

Why it matters:

Prevents accidental changes in objects that should not mutate
Makes your code safer and predictable, especially in larger apps
Reduces boilerplate by automating type transformations

4. Utility Types for Composability

TypeScript comes with built-in utility types like Pick, Omit, Record, Partial, which let you compose new types from existing ones. This makes your code more modular and maintainable.

type User = { id: string; name: string; email: string; isAdmin: boolean };

// GOOD: Pick - extract only needed fields
type UserPreview = Pick<User, 'id' | 'name'>;
const preview: UserPreview = { id: '1', name: 'Ed' };
console.log(preview.id); // ✅ autocompletion works

// GOOD: Omit - exclude fields you don't need
type UserWithoutAdmin = Omit<User, 'isAdmin'>;
const normalUser: UserWithoutAdmin = { id: '2', name: 'Alice', email: 'alice@mail.com' };

// GOOD: Record - map keys to a specific type
type UserMap = Record<string, User>;
const users: UserMap = {
  '1': { id: '1', name: 'Ed', email: 'ed@mail.com', isAdmin: true },
  '2': { id: '2', name: 'Alice', email: 'alice@mail.com', isAdmin: false }
};
console.log(users['1'].name); // ✅ autocompletion works

// GOOD: Partial - make all properties optional
type PartialUser = Partial<User>;
const update: PartialUser = { email: 'new@mail.com' }; // only updating email

// BAD: without utility types
const loose: any = {
  '1': { id: '1', name: 'Ed', email: 'ed@mail.com', isAdmin: true }
};
console.log(loose['1'].name); // ❌ no autocompletion, IDE can't help
const partialUpdate = { email: 'new@mail.com' }; // ❌ TS can't validate keys or types

Pick and Omit let you focus on the relevant subset of a type
Record is great for maps keyed by ID or other identifiers
Partial is perfect for updates or optional properties
Using any or loose types breaks autocompletion and type safety

Why it matters:

Reduces repetition by reusing types
Helps enforce consistent structure across your app
Works beautifully with generics for highly flexible yet safe code

5. Type Guards and Assertion Functions

Type guards let you narrow types safely at runtime, so TypeScript can understand the type of an object after runtime checks. They’re invaluable when working with external data, API responses, or dynamic content.

function isUser(obj: any): obj is User {
  return obj && typeof obj.id === 'string' && typeof obj.name === 'string';
}

const maybeUser: any = getData();

// GOOD: type guard narrows type
if (isUser(maybeUser)) {
  console.log(maybeUser.id); // ✅ TS knows this is User
  console.log(maybeUser.name);
} else {
  console.log('Not a user');
}

// BAD: without type guard
const loose = getData();
console.log(loose.id); // ❌ TS can't check, may throw at runtime

Why it matters:

Protects against runtime errors when data may not match expected types
Provides better autocompletion and tooling support in your IDE
Makes your codebase more robust and easier to refactor

Conclusion

Using these patterns can make your TypeScript code more robust, maintainable, and developer-friendly. Patterns like:

Generic API responses
Conditional types
Mapped types
Utility types
Type guards

…allow you to scale confidently while keeping IDE tooling, autocompletion, and type safety fully leveraged.

Next steps / bonus tip:

Combine these patterns for complex components or API-heavy applications, and your TS code will be safer and much easier to maintain.

How I understood... javascript reduce method

epresas — Thu, 21 Jan 2021 10:01:14 +0000

I've been working almost for 3 years in web development, and like all learning roads, some concepts are harder to grasp than others, for me one of them was javascript reduce method.

So, I'm going to share a simple example of a real life situation that could be solved using this method.

The setup

Imagine that a coworker's birthday is coming soon, and everybody wants to pitch in to buy a present, ideally the total amount for everybody to give would be determined by a simple division: totalAmount / totalOfPeople.

But not always everyone can give the same amount (some of us live on a budget!), so a list is made with the amount each person can give, resulting in the following array:

const amountPerPerson = [
  {
    name: "Ed",
    amount: 20
  },
  {
    name: "John",
    amount: 30
  },
  {
    name: "Ari",
    amount: 15
  },
  {
    name: "Mary",
    amount: 25
  },
  {
    name: "Gonzalo",
    amount: 10
  }
]

The solution

How would we get the total amount we have to buy the present? Enter our saviour reduce!

const totalAmount = amountPerPerson.reduce((acc, curr) => acc + curr.amount, 0);

console.log(totalAmount);
// 100

So, what does all this gibberish do?

Ok, let's break it down... the reduce function is receiving two parameters:

A callback function, which receives two parameters also: the acc or accumulator and curr or current-value (it can also receive the index of the current element being iterated, and the array we're applying the reduce, in case you need to do something with them), reduce will iterate through each element of the array, applying the callback function to the current element and storing or "reducing" the result in the accumulator, in this example, the function adds the amount of the current person to the total.

The second parameter the reduce function gets is the starting value for the accumulator, it can be a number, an object or even another array, in this case it's 0 but imagine for our example that our good old boss (wink wink!) says something like "hey! great idea! I'll put 50 euros and you guys add the rest", our function will be something like this:

// We start with the 50 euros our great boss pitched in!
const totalAmount = amountPerPerson.reduce((acc, curr) => acc + curr.amount, 50);

console.log(totalAmount);
// 150

I mentioned above that we could use as extra parameters of the reducer callback the index, and the array.

To stay with this example, I'm going to add a method that allows me to calculate the average per person of the amount pitched in (why would I need it? IDK, use your imagination! 😜)

const average = amountPerPerson.reduce((acc, curr, index, array) => {
    acc += curr.amount;
    if (index === array.length - 1) {
      return acc / array.length;
    } else {
      return acc;
    }
 console.log(average);
  }, 0);

// 20

Here is a codepen to show it all in action:

And that's how I understood reduce method!

Conclusion

Although reduce array method is one of the trickiest to get at first, it can be really resourceful when trying to condense complex data into simple values for later use.

When first learning javascript, some parts might seem tricky or sometimes scary (still happens to me!), but the trick is to try and put the concept I'm trying to learn in real life situations to see if it works, and I keep my good old friend the rubber ducky nearby to explain it.

I'll be posting little bits like this, and hope this helps you on your journey to become a javascript ninja!

Thanks for reading! and feel free to comment and share.