{"id":776,"date":"2025-08-19T20:19:43","date_gmt":"2025-08-20T02:19:43","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=776"},"modified":"2025-08-19T20:35:39","modified_gmt":"2025-08-20T02:35:39","slug":"returntype-built-in-utility-types-in-typescript","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/returntype-built-in-utility-types-in-typescript\/","title":{"rendered":"ReturnType<T> &#8211; Built-in utility types in Typescript"},"content":{"rendered":"\n<p>Example Expression in TypeScript :<\/p>\n\n\n\n<div class=\"dm-code-snippet dark dm-normal-version default no-background-mobile\" snippet-height=\"\" style=\"background-color:#abb8c3\"><div class=\"control-language\"><div class=\"dm-buttons\"><div class=\"dm-buttons-left\"><div class=\"dm-button-snippet red-button\"><\/div><div class=\"dm-button-snippet orange-button\"><\/div><div class=\"dm-button-snippet green-button\"><\/div><\/div><div class=\"dm-buttons-right\"><a id=\"dm-copy-raw-code\"><span class=\"dm-copy-text\">Copy Code<\/span><span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span><span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a><\/div><\/div><pre class=\" no-line-numbers\"><code id=\"dm-code-raw\" class=\" no-wrap language-php\">type ReturnType&lt;T> = T extends (...args: any[]) => infer R ? R : never;<\/code><\/pre><\/div><\/div>\n\n\n\n<p>This is the <strong>built-in <code>ReturnType<\/code> type<\/strong>, redefined in its raw form. It extracts the return type of a function type.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd0e Step-by-step explanation<\/h3>\n\n\n\n<ol>\n<li><strong>Generic parameter<\/strong><code>&lt;T&gt;<\/code>\n<ul>\n<li><code>T<\/code> is a generic type. It can be any type, but this utility is meant to be used with function types.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol start=\"2\">\n<li><strong>Conditional type<\/strong><code>T extends (...args: any[]) =&gt; infer R ? R : never<\/code> This means:\n<ul>\n<li>If <code>T<\/code> is a function type (something like <code>(args) =&gt; returnType<\/code>), then infer its return type as <code>R<\/code>.<\/li>\n\n\n\n<li>Otherwise, give <code>never<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol start=\"3\">\n<li><strong>Function check<\/strong><code>(...args: any[]) =&gt; infer R<\/code>\n<ul>\n<li><code>(...args: any[])<\/code> means \u201ca function with any number of parameters of any type.\u201d<\/li>\n\n\n\n<li><code>infer R<\/code> is special \u2014 it <strong>introduces a new type variable <code>R<\/code><\/strong> that represents the <strong>return type<\/strong> of the function.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol start=\"4\">\n<li><strong>The result<\/strong>\n<ul>\n<li>If <code>T<\/code> is a function, <code>R<\/code> (the inferred return type) is returned.<\/li>\n\n\n\n<li>If <code>T<\/code> is not a function, the result is <code>never<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 Example usage<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-2\">\n<div class=\"wp-block-column is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"dm-code-snippet dark dm-normal-version default\" snippet-height=\"\" style=\"background-color:#FB8CFF\"><div class=\"control-language\"><div class=\"dm-buttons\"><div class=\"dm-buttons-left\"><div class=\"dm-button-snippet red-button\"><\/div><div class=\"dm-button-snippet orange-button\"><\/div><div class=\"dm-button-snippet green-button\"><\/div><\/div><div class=\"dm-buttons-right\"><a id=\"dm-copy-raw-code\"><span class=\"dm-copy-text\">Copy Code<\/span><span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span><span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a><\/div><\/div><pre class=\" line-numbers\"><code id=\"dm-code-raw\" class=\" no-wrap language-typescript\">function greet(name: string): string {\n  return `Hello, ${name}`;\n}\n\ntype GreetReturn = ReturnType&lt;typeof greet>;  \n\/\/ GreetReturn = string<\/code><\/pre><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Another example:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4\">\n<div class=\"wp-block-column is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"dm-code-snippet dark dm-normal-version default no-background-mobile\" snippet-height=\"\" style=\"background-color:#5E69FF\"><div class=\"control-language\"><div class=\"dm-buttons\"><div class=\"dm-buttons-left\"><div class=\"dm-button-snippet red-button\"><\/div><div class=\"dm-button-snippet orange-button\"><\/div><div class=\"dm-button-snippet green-button\"><\/div><\/div><div class=\"dm-buttons-right\"><a id=\"dm-copy-raw-code\"><span class=\"dm-copy-text\">Copy Code<\/span><span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span><span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a><\/div><\/div><pre class=\" line-numbers\"><code id=\"dm-code-raw\" class=\" no-wrap language-php\">type Foo = ReturnType&lt;() => number>; \n\/\/ Foo = number\n\ntype Bar = ReturnType&lt;string>; \n\/\/ Bar = never (because string is not a function)<\/code><\/pre><\/div><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Example Expression in TypeScript : This is the built-in ReturnType type, redefined in its raw form. It extracts the return type of a function type. \ud83d\udd0e Step-by-step explanation \u2705 Example usage Another example:<\/p>\n","protected":false},"author":1,"featured_media":472,"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\/776"}],"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=776"}],"version-history":[{"count":7,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/776\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/776\/revisions\/787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/472"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}