Method overloading within TypeScript feels slightly strange, especially if you’re coming from a language such as C#. <\/p>\n
In essence we declare the overloads but only have a single implementation which should handle the alternate arguments from the declared overloads by checking the types passed in. Don’t worry, we’ll look at an example which will make this clear.<\/p>\n
The first thing to know about TypeScript overloads is if we declare overloads with the same number of arguments in the methods, these will be transpiled to JavaScript and the static types of the arguments is lost. <\/p>\n
In other words, if you have <\/p>\n
\r\nclass Options {\r\n static if<T>(value: T, condition: boolean): void {\r\n }\r\n static if<T>(value: T, numberParameter: number): void {\r\n }\r\n}\r\n<\/pre>\nthe type information would be lost when transpiled, effectively meaning both methods would look like this<\/p>\n
\r\nstatic if(value, condition);\r\n<\/pre>\nSo how do we do method overloading in TypeScript?<\/strong><\/p>\nWe can create method overloads with different numbers of arguments within TypeScript, but we “declare” the method signatures without implementations, for example<\/p>\n
\r\nclass Options {\r\n static if<T>(value: T, condition: boolean): void;\r\n static if<T>(value: T, numberParameter: number, stringParameter: string): void;\r\n\r\n \/\/ implementation to follow\r\n}\r\n<\/pre>\nAs can be seen we have two overloads of the if<\/em> method taking two and three arguments respectively, but these methods have no implementation. Instead we need to create another overload which can take all the arguments. <\/p>\nIn this case we have a method with two arguments and one with three, hence our implementation needs to take three arguments. We then need to either match the argument types (if all overloads take the same type for any argument) or handle different types via a union or an any<\/em> type and then check the type passed into the method using typeof or instanceof. <\/p>\nSo for example, here’s an implementation of a method which can handle the types passed to either of the “declared” overrides <\/p>\n
\r\nstatic if<T>(value: T, stringOrNumberParameter: any, stringParameter?: string): void {\r\n if (stringOrNumberParameter && typeof stringOrNumberParameter == "number") {\r\n \/\/ handle the second argument as a number\r\n }\r\n else {\r\n \/\/ handle the second argument as a string\r\n }\r\n}\r\n<\/pre>\nNotice how the third argument needs to be optional or have a default so that we can still use the two argument overload.<\/p>\n
Hence, we end up with the following<\/p>\n
\r\nclass Options {\r\n static if<T>(value: T, condition: boolean): void;\r\n static if<T>(value: T, numberParameter: number, stringParameter: string): void;\r\n \r\n static if<T>(value: T, stringOrNumberParameter: any, stringParameter?: string): void {\r\n if (stringOrNumberParameter && typeof stringOrNumberParameter == "number") {\r\n \/\/ handle the second argument as a number\r\n }\r\n else {\r\n \/\/ handle the second argument as a string\r\n }\r\n }\r\n}\r\n<\/pre>\nWe can implement overloads with the same number of arguments, within TypeScript. Again the types are lost once transpiled, but let’s take this example<\/p>\n
\r\nfunction run(option: null): null;\r\nfunction run(option: number): number;\r\nfunction run(option: string): string;\r\nfunction run(option: any): any {\r\n if(typeof option == "string") {\r\n \/\/ string implementation\r\n }\r\n}\r\n<\/pre>\nwhich again gets transpiled without types to<\/p>\n
\r\nfunction run(option) {\r\n}\r\n<\/pre>\nhowever during development the types are respected. In such scenarios one might also use unions, such as<\/p>\n
\r\nfunction run(option: string | number | null) {\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Method overloading within TypeScript feels slightly strange, especially if you’re coming from a language such as C#. In essence we declare the overloads but only have a single implementation which should handle the alternate arguments from the declared overloads by checking the types passed in. Don’t worry, we’ll look at an example which will make […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-7084","post","type-post","status-publish","format-standard","hentry","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7084"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7084\/revisions"}],"predecessor-version":[{"id":7501,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7084\/revisions\/7501"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}