88 lines
12 KiB
HTML
88 lines
12 KiB
HTML
|
<!DOCTYPE html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1" name="viewport" /><!--replace-start-0--><!--replace-start-5--><!--replace-start-8--><title>Function overloads - My Zettelkasten</title><!--replace-end-8--><!--replace-end-5--><!--replace-end-0--><link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=Merriweather|Libre+Franklin|Roboto+Mono&display=swap" rel="stylesheet" /><!--replace-start-1--><!--replace-start-4--><!--replace-start-7--><link href="https://raw.githubusercontent.com/srid/neuron/master/assets/neuron.svg" rel="icon" /><meta content="Function overloading is not a feature of JavaScript but something close to it can be achieved with TypeScript. It proceeds by defining multiple function types (defined above the function) that may serve as the actual function’s parameters. Then with the actual function, you leave the changeable para" name="description" /><meta content="Function overloads" property="og:title" /><meta content="My Zettelkasten" property="og:site_name" /><meta content="article" property="og:type" /><meta content="Function_overloads" property="neuron:zettel-id" /><meta content="Function_overloads" property="neuron:zettel-slug" /><meta content="typescript" property="neuron:zettel-tag" /><script type="application/ld+json">[]</script><style type="text/css">body{background-color:#eeeeee !important;font-family:"Libre Franklin", serif !important}body .ui.container{font-family:"Libre Franklin", serif !important}body h1, h2, h3, h4, h5, h6, .ui.header, .headerFont{font-family:"Merriweather", sans-serif !important}body code, pre, tt, .monoFont{font-family:"Roboto Mono","SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New", monospace !important}body div.z-index p.info{color:#808080}body div.z-index ul{list-style-type:square;padding-left:1.5em}body div.z-index .uplinks{margin-left:0.29999em}body .zettel-content h1#title-h1{background-color:rgba(33,133,208,0.1)}body nav.bottomPane{background-color:rgba(33,133,208,2.0e-2)}body div#footnotes{border-top-color:#2185d0}body p{line-height:150%}body img{max-width:100%}body .deemphasized{font-size:0.94999em}body .deemphasized:hover{opacity:1}body .deemphasized:not(:hover){opacity:0.69999}body .deemphasized:not(:hover) a{color:#808080 !important}body div.container.universe{padding-top:1em}body div.zettel-view ul{padding-left:1.5em;list-style-type:square}body div.zettel-view .pandoc .highlight{background-color:#ffff00}body div.zettel-view .pandoc .ui.disabled.fitted.checkbox{margin-right:0.29999em;vertical-align:middle}body div.zettel-view .zettel-content .metadata{margin-top:1em}body div.zettel-view .zettel-content .metadata div.date{text-align:center;color:#808080}body div.zettel-view .zettel-content h1{padding-top:0.2em;padding-bottom:0.2em;text-align:center}body div.zettel-view .zettel-content h2{border-bottom:solid 1px #4682b4;margin-bottom:0.5em}body div.zettel-view .zettel-content h3{margin:0px 0px 0.4em 0px}body div.zettel-view .zettel-content h4{opacity:0.8}body div.zettel-view .zettel-content div#footnotes{margin-top:4em;border-top-style:groove;border-top-width:2px;font-size:0.9em}body div.zettel-view .zettel-content div#footnotes ol > li > p:only-of-type{display:inline;margin-right:0.5em}body div.zettel-view .zettel-content aside.footnote-inline{width:30%;padding-left:15px;margin-left:15px;float:right;background-color:#d3d3d3}body div.zettel-view .zettel-content .overflows{overflow:auto}body div.zettel-view .zettel-content code{margin:auto auto auto auto;font-size:100%}body div.zettel-view .zettel-content p code, li code, ol code{padding:0.2em 0.2em 0.2em 0.2em;background-color:#f5f2f0}body div.zettel-view .zettel-content pre{overflow:auto}body div.zettel-view .zettel-content dl dt{font-weight:bold}body div.zettel-view .zettel-content blockquote{background-color:#f9f9f9;border-left:solid 10px #cccccc;margin:1.5em 0px 1.5em 0px;padding:0.5em
|
|||
|
|
async=""
|
|||
|
|
id="MathJax-script"
|
|||
|
|
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
|||
|
|
></script>
|
|||
|
|
<link
|
|||
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
|
|||
|
|
rel="stylesheet"
|
|||
|
|
/><link rel="preconnect" href="https://fonts.googleapis.com" /><link
|
|||
|
|
rel="preconnect"
|
|||
|
|
href="https://fonts.gstatic.com"
|
|||
|
|
crossorigin
|
|||
|
|
/><link
|
|||
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
|
|||
|
|
rel="stylesheet"
|
|||
|
|
/>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body .ui.container,
|
|||
|
|
body ul {
|
|||
|
|
font-family: "IBM Plex Sans" !important;
|
|||
|
|
}
|
|||
|
|
body blockquote {
|
|||
|
|
border-left-width: 3px !important;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
.headerFont,
|
|||
|
|
.ui.header,
|
|||
|
|
body h1,
|
|||
|
|
h2,
|
|||
|
|
h3,
|
|||
|
|
h4,
|
|||
|
|
h5,
|
|||
|
|
h6 {
|
|||
|
|
font-family: "IBM Plex Sans Condensed" !important;
|
|||
|
|
}
|
|||
|
|
body p {
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
.monoFont,
|
|||
|
|
body code,
|
|||
|
|
pre,
|
|||
|
|
tt {
|
|||
|
|
font-family: "IBM Plex Mono" !important;
|
|||
|
|
font-size: 12px !important;
|
|||
|
|
line-height: 1.4 !important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!--replace-end-7--><!--replace-end-4--><!--replace-end-1--></head><body><div class="ui fluid container universe"><!--replace-start-2--><!--replace-start-3--><!--replace-start-6--><div class="ui text container" id="zettel-container" style="position: relative"><div class="zettel-view"><article class="ui raised attached segment zettel-content"><div class="pandoc"><h1 id="title-h1">Function overloads</h1><p>Function overloading is not a feature of JavaScript but something close to it can be achieved with TypeScript. It proceeds by defining multiple function types (defined above the function) that may serve as the actual function’s parameters. Then with the actual function, you leave the changeable parameters open as optional unions and/or <code>unknown</code> :</p><pre><code class="ts language-ts">// First oveload type:
|
|||
|
|
function logSearch(term: string, options?: string): void;
|
|||
|
|
|
|||
|
|
// Second overload type:
|
|||
|
|
function logSearch(term: string, options?: number): void;
|
|||
|
|
|
|||
|
|
// Implementation:
|
|||
|
|
function logSearch(term: string, p2?: unknown) {
|
|||
|
|
let query = `https://searchdatabase/${term}`;
|
|||
|
|
if (typeof p2 === "string") {
|
|||
|
|
query = `${query}/tag=${p2}`;
|
|||
|
|
console.log(query);
|
|||
|
|
} else {
|
|||
|
|
query = `${query}/page=${p2}`;
|
|||
|
|
console.log(query);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
logSearch("apples", "braeburn");
|
|||
|
|
logSearch("bananas", 3);</code></pre><pre><code class="ts language-ts">// First overload type:
|
|||
|
|
function logSearchUnion(term: string, options?: string): void;
|
|||
|
|
|
|||
|
|
// Second overload type:
|
|||
|
|
function logSearchUnion(term: string, options?: number): void;
|
|||
|
|
|
|||
|
|
// Implementation:
|
|||
|
|
function logSearchUnion(term: string, p2?: string | number) {
|
|||
|
|
let query = `https://searchdatabase/${term}`;
|
|||
|
|
if (typeof p2 === "string") {
|
|||
|
|
query = `${query}/tag=${p2}`;
|
|||
|
|
console.log(query);
|
|||
|
|
} else {
|
|||
|
|
query = `${query}/page=${p2}`;
|
|||
|
|
console.log(query);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
logSearchUnion("melon", "honey-dew");
|
|||
|
|
logSearchUnion("oranges", 4);</code></pre></div></article><nav class="ui attached segment deemphasized bottomPane" id="neuron-tags-pane"><div><span class="ui basic label zettel-tag" title="Tag">typescript</span></div></nav><nav class="ui bottom attached icon compact inverted menu blue" id="neuron-nav-bar"><!--replace-start-9--><!--replace-end-9--><a class="right item" href="impulse.html" title="Open Impulse"><i class="wave square icon"></i></a></nav></div></div><!--replace-end-6--><!--replace-end-3--><!--replace-end-2--><div class="ui center aligned container footer-version"><div class="ui tiny image"><a href="https://neuron.zettel.page"><img alt="logo" src="https://raw.githubusercontent.com/srid/neuron/master/assets/neuron.svg" title="Generated by Neuron 1.9.35.3" /></a></div></div></div></body></html>
|