DEV Community

Cover image for 12 Advanced TypeScript Tricks Every Developer Should Know
Carlos Chao(El Frontend)
Carlos Chao(El Frontend) Subscriber

Posted on

12 Advanced TypeScript Tricks Every Developer Should Know

#webdev #programming #typescript #elfrontend

TypeScript isn't just about typing your code—it's a powerful tool that helps you write safer, more expressive, and maintainable software.

Here are 12 advanced techniques to get the most out of it:

1. infer: Extract types without repeating logic

The infer keyword lets you capture types dynamically within conditional types—perfect for inferring function return types without duplicating logic.

type GetParserResult<T> = T extends
  | (() => infer TResult)
  | { parse: () => infer TResult }
  | { extract: () => infer TResult }
  ? TResult
  : never;
Enter fullscreen mode Exit fullscreen mode

2. Literal types with template strings

Template literal types allow you to combine values declaratively.

type Bread = "croissant" | "baguette";
type Filling = "cheese" | "ham";
type Option = `${Filling} ${Bread}`;
// "cheese croissant" | "ham baguette" | ...
Enter fullscreen mode Exit fullscreen mode

You can even customize with emojis:

type Fruit = "apple" | "banana";
type FruitEmoji = {
  [K in Fruit]: `${K} 🍎`;
};
// { apple: "apple 🍎", banana: "banana 🍎" }
Enter fullscreen mode Exit fullscreen mode

3. Enable noUncheckedIndexedAccess in tsconfig.json

A lesser-known but powerful flag that forces you to handle missing keys or indexes:

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}
Enter fullscreen mode Exit fullscreen mode

It makes object and array access safer.

4. Reusable generic functions

Generic functions preserve type precision no matter the value passed:

function identity<T>(value: T): T {
  return value;
}
Enter fullscreen mode Exit fullscreen mode

5. Use Record to map keys to values

Great for defining configurations or permissions per role:

type UserRoles = "admin" | "user";
type Permissions = Record<UserRoles, string[]>;
// { admin: string[]; user: string[] }
Enter fullscreen mode Exit fullscreen mode

6. Handy utility types: Partial, Required, Readonly, Pick

Powerful type transformers:

  • Partial<T> → Makes all properties optional
  • Required<T> → Makes all properties required
  • Readonly<T> → Prevents modification
  • Pick<T, K> → Selects a subset of properties

7. Custom type guards

Let you refine types at runtime and unlock autocompletion:

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

8. Properly configure tsconfig.json for your environment

For Node.js 

{
  "compilerOptions": {
    "module": "NodeNext",
    "target": "ES2022"
  }
}
Enter fullscreen mode Exit fullscreen mode

For Web Apps 

{
  "compilerOptions": {
    "lib": ["ES2022", "DOM"]
  }
}
Enter fullscreen mode Exit fullscreen mode

9. keyof + typeof for dynamic types

Generate types from real objects:

const colors = {
  primary: "#000",
  secondary: "#FFF"
};

type ColorKeys = keyof typeof colors;
// "primary" | "secondary"
Enter fullscreen mode Exit fullscreen mode

10. Distributive conditional types

TypeScript distributes conditional types over unions automatically:

type Fruit = "apple" | "banana" | "orange";
type IsCitrus<T> = T extends "orange" ? true : false;

type Result = IsCitrus<Fruit>;
// true | false | false
Enter fullscreen mode Exit fullscreen mode

11. Extend the global scope with declare global

Add custom properties to window or other global objects:

declare global {
  interface Window {
    myCustomProperty: string;
  }
}
Enter fullscreen mode Exit fullscreen mode

12. Generic functions with key safety

Use keyof and typeof to access properties safely:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
Enter fullscreen mode Exit fullscreen mode

✨ Final Thoughts

These tricks don't just save you time—they make your code more expressive and less error-prone. TypeScript is a design tool: the better you master it, the better you communicate with your team... and the compiler.

Did you already use any of these? Which one was new to you?

Based on the learnings from Total TypeScript by Matt Pocock

Top comments (6)

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

pretty cool, always appreciate seeing new ways to tweak typescript in daily stuff - you think getting too fancy with this stuff actually makes code harder for new devs, or does it really help keep things tight long-term?

Collapse
 
elfrontend profile image
Carlos Chao(El Frontend) •

Thanks! Great question — I think it depends on the context and the team. Some advanced TypeScript patterns can definitely feel overwhelming at first, especially for new devs. But when used with care, they can really improve maintainability and catch bugs early. The key is balancing clarity with type safety — if it takes too long to understand a type, it might be too clever. I try to favor readability first, and optimize when it actually adds value long-term.

Collapse
 
nevodavid profile image
Nevo David •

Haha wow, some of these are totally new to me - love seeing stuff that actually makes my code better.

Collapse
 
elfrontend profile image
Carlos Chao(El Frontend) •

I totally recommend the Total TypeScript book.

Collapse
 
hng_thc_7942da846939a35 profile image
Anonymous •

Oh yeah, thank so much

Collapse
 
elfrontend profile image
Carlos Chao(El Frontend) •

Thanks to you