{"id":788,"date":"2025-08-19T21:34:49","date_gmt":"2025-08-20T03:34:49","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=788"},"modified":"2025-08-19T21:34:49","modified_gmt":"2025-08-20T03:34:49","slug":"infer-in-typescript","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/infer-in-typescript\/","title":{"rendered":"infer in TypeScript"},"content":{"rendered":"\n

infer<\/code> in TypeScript \u2014 it\u2019s one of the most powerful(but sometimes confusing) features.<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udd0e What is infer<\/code>?<\/h2>\n\n\n\n

The infer<\/code> keyword is used inside a conditional type<\/strong> to declare a new type variable<\/strong> that TypeScript will try to “infer” (deduce) from the type expression.<\/p>\n\n\n\n

In plain words:<\/p>\n\n\n\n

    \n
  • infer<\/code> = \u201clet TypeScript figure this type out here, and I\u2019ll give it a name so I can use it later.\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n

    \u26a1 Syntax<\/h2>\n\n\n\n
    T extends SomeType<infer U> ? U : Fallback\n<\/code><\/pre>\n\n\n\n
      \n
    • If T<\/code> matches SomeType<...><\/code>, then TypeScript extracts the type inside and binds it to U<\/code>.<\/li>\n\n\n\n
    • Otherwise, the fallback branch is used.<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      \ud83d\udccc Simple Examples<\/h2>\n\n\n\n
      1. Extracting an array element type<\/h3>\n\n\n\n
      type ElementType<T> = T extends (infer U)[] ? U : never;\n\ntype A = ElementType<string[]>; \/\/ string\ntype B = ElementType<number[]>; \/\/ number\ntype C = ElementType<boolean>;  \/\/ never (not an array)\n<\/code><\/pre>\n\n\n\n
      Here, infer U<\/code> captures the element type of the array.<\/p>\n\n\n\n
      \n\n\n\n
      2. Extracting function return type<\/h3>\n\n\n\n
      type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;\n\ntype A = MyReturnType<() => number>;     \/\/ number\ntype B = MyReturnType<(x: string) => boolean>; \/\/ boolean\ntype C = MyReturnType<string>;           \/\/ never\n<\/code><\/pre>\n\n\n\n
      Here, infer R<\/code> captures the return type of the function.<\/p>\n\n\n\n
      \n\n\n\n
      3. Extracting function parameter type<\/h3>\n\n\n\n
      type FirstArg<T> = T extends (arg: infer P, ...args: any[]) => any ? P : never;\n\ntype A = FirstArg<(x: string, y: number) => void>; \/\/ string\ntype B = FirstArg<() => void>; \/\/ never\n<\/code><\/pre>\n\n\n\n
      Here, infer P<\/code> captures the type of the first parameter.<\/p>\n\n\n\n
      \n\n\n\n
      \ud83e\udde0 How it works under the hood<\/h2>\n\n\n\n
      Think of infer<\/code> like a pattern match for types<\/strong>:<\/p>\n\n\n\n
        \n
      • infer<\/code> only appears in a conditional type (extends ? :<\/code>).<\/li>\n\n\n\n
      • When TypeScript sees infer R<\/code>, it tries to unify<\/strong> the given type with the pattern, extracting what fits into R<\/code>.<\/li>\n\n\n\n
      • If successful, you can use that inferred type in the true branch.<\/li>\n\n\n\n
      • If not, the false branch is chosen.<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        \ud83d\ude80 Why is infer<\/code> powerful?<\/h2>\n\n\n\n
        Because you can extract pieces of types dynamically<\/strong>, without manually writing them.
        This is how many utility types (like ReturnType<\/code>, Parameters<\/code>, InstanceType<\/code>, etc.) are built.<\/p>\n\n\n\n
        \n\n\n\n
        \u2705 Summary of infer<\/code>:<\/strong><\/p>\n\n\n\n
          \n
        • Used only in conditional types.<\/li>\n\n\n\n
        • Introduces a temporary type variable (infer X<\/code>).<\/li>\n\n\n\n
        • TypeScript automatically deduces what X<\/code> should be if the pattern matches.<\/li>\n\n\n\n
        • Lets you extract parts of complex types (array elements, function returns, parameters, etc.).<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          Build your own custom utility types<\/strong> step by step using infer<\/code> (like Parameters<T><\/code>, ConstructorArgs<T><\/code>, etc.) !<\/p>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          infer in TypeScript \u2014 it\u2019s one of the most powerful(but sometimes confusing) features. \ud83d\udd0e What is infer? The infer keyword is used inside a conditional type to declare a new type variable that TypeScript will try to “infer” (deduce) from the type expression. In plain words: \u26a1 Syntax \ud83d\udccc Simple Examples 1. Extracting an array […]<\/p>\n","protected":false},"author":1,"featured_media":474,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[49],"tags":[23,63],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/788"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":1,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":789,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions\/789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/474"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}