<div id="readability-page-1" class="page"><div id="kakaoContent">

 <div>
 <a href="/m/category/Programming%20Language/%F0%9F%9F%A6%20Typescript">Programming Language/🟦 Typescript</a><h2>func in TS (3) : overloading (오버로딩)</h2>
 <cite>
 DarrenKwonDev
 </cite>
 </div>
 <time>2021. 8. 14. 18:28</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 

 
 
 <div>
 java에서 쓴 글을 가져와보자 (<a href="https://darrengwon.tistory.com/1347" target="_blank" rel="noopener">https://darrengwon.tistory.com/1347</a>)
<ul data-ke-list-type="disc">
<li>오버로딩(Overloading)&nbsp;: 같은 이름의 메서드 여러개를 가지면서 매개변수의 유형과 개수가 다르도록 하는 기술</li>
<li>오버라이딩(Overriding)&nbsp;: 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용</li>
</ul>

OverloadingExam 클래스 내부의 메서드들은, 인자의 타입에 따라 적합한 메서드가 알아서 트리거 된다.
<pre id="code_1628932156118" data-ke-language="java" data-ke-type="codeblock"><code>// java임 오해 ㄴㄴ
public class OverloadingExam {
	public int calculate(int one, int two) {
		return one + two;
	}
	public long calculate(long one, long two) {
		return one + two;
	}
	public long calculate(long one, int two) {
		return one + two;
	}
	public long calculate(int one, long two) {
		return one + two;
	}
}</code></pre>

그러나 javascript에서는 그런게 없다.&nbsp;굳이 만들자면 다음과 같이 해볼 수 있을 것이다.
내부적으로 인자의 falsy 체크를 해나가면서 overload처럼 보이게 만드는 것이다.
<pre id="code_1628931054356" data-ke-language="javascript" data-ke-type="codeblock"><code>function overloadLikeFunc (a, b) {
 if (typeof b === 'undefined') return a
 return a + b
}</code></pre>

typescript에서도 마찬가지로 java와 같은 깔끔한 overload는 없고, 본질적으로는 javascript와 동일하게 오버로딩을 구현해야 한다.
다만, 타이핑을 통해서, 오버로딩의 케이스를 좀 더 직관적으로 보여줄 수 있을 뿐이다.

이러한 overload 구현에 있어 overload signature 부분과 실제 함수 구현부가 워낙 비슷하게 생긴 탓에 혼동하기 쉬운데,
overload signature는 오로지 overload 함수를 위해서만 사용되고, 그 외에는 사용될 일이 없다.
따라서, overload 함수 위에 곧바로 overload signature를 적어주는게 좋다.
<pre id="code_1628931986607" data-ke-language="java" data-ke-type="codeblock"><code>function overload (a: number): number // overload signature
function overload (a: number, b: number): number // overload signature

// 실제 overload를 구현한 함수부
function overload (a: number, b?: number): number {
 if (b !== undefined) return a + b
 else return a
}

const output1 = overload(1)
const output2 = overload(1, 2)</code></pre>

overload된 함수에 hover해보면 몇 개의 오버로드가 존재하는지 알려주고 match되지 않을 때에 경고를 날려준다.
<figure data-origin-width="647" data-origin-height="148" data-ke-mobilestyle="widthOrigin"><img src="https://blog.kakaocdn.net/dn/kzFip/btrcb8S9cIH/U1ANK4K01QhM8oS5oJkjIK/img.png" data-origin-width="647" data-origin-height="148" data-ke-mobilestyle="widthOrigin"></figure>


함수의 인자 숫자가 같고, 반환 타입이 같다면 굳이 overload를 사용할 필요 없다. Union Type이 오히려 좋다.
generic때도 그렇고, 복잡한 것보다 간단한 것이 더 효과적인 경우가 많다.
<pre id="code_1628933095127" data-ke-language="javascript" data-ke-type="codeblock"><code>// verbose overload
function overloadLen (s: string): number
function overloadLen (arr: any[]): number
function overloadLen (x: any) {
 return x.length
}

// good
function simpleLen (x: any[] | string) {
 return x.length
}</code></pre>



ref)&nbsp;
<a href="https://dev.to/krzysztofzuraw/typescript-function-overloads-1iff" target="_blank" rel="noopener">https://dev.to/krzysztofzuraw/typescript-function-overloads-1iff</a>
<a href="https://vriz.notion.site/4-More-on-Functions-ff89f764d409440ab4fbbae9a08cfd3a" target="_blank" rel="noopener">https://vriz.notion.site/4-More-on-Functions-ff89f764d409440ab4fbbae9a08cfd3a</a>
 
 
					
 
 
 </div>

 
 
 
 
 
 


 

 
 
 
 </div></div>

HotHandCoding

DarrenKwon

java에서 쓴 글을 가져와보자 (https://darrengwon.tistory.com/1347)
오버로딩(Overloading) : 같은 이름의 메서드 여러개를 가지면서 매개변수의 유형과 개수가 다르도록 하는 기술
오버라이딩(Overriding) : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용
 
OverloadingExam 클래스 내부의 메서드들은, 인자의 타입에 따라 적합한 메서드가 알아서 트리거 된다.
// java임 오해 ㄴㄴ
public class OverloadingExam {
	public int calculate(int one, int two) {
		return one + two;
	}
	public long calculate(long one, long two) {
		return one + two;
	}
	public long calculate(long one, int two) {
		return one + two;
	}
	public long calculate(int one, long two) {
		return one + two;
	}
}
 
그러나 javascript에서는 그런게 없다. 굳이 만들자면 다음과 같이 해볼 수 있을 것이다.
내부적으로 인자의 falsy 체크를 해나가면서 overload처럼 보이게 만드는 것이다.
function overloadLikeFunc (a, b) {
  if (typeof b === 'undefined') return a
  return a + b
}
 
typescript에서도 마찬가지로 java와 같은 깔끔한 overload는 없고, 본질적으로는 javascript와 동일하게 오버로딩을 구현해야 한다.
다만, 타이핑을 통해서, 오버로딩의 케이스를 좀 더 직관적으로 보여줄 수 있을 뿐이다.
 
이러한 overload 구현에 있어 overload signature 부분과 실제 함수 구현부가 워낙 비슷하게 생긴 탓에 혼동하기 쉬운데,
overload signature는 오로지 overload 함수를 위해서만 사용되고, 그 외에는 사용될 일이 없다.
따라서, overload 함수 위에 곧바로 overload signature를 적어주는게 좋다.
function overload (a: number): number // overload signature
function overload (a: number, b: number): number // overload signature
// 실제 overload를 구현한 함수부
function overload (a: number, b?: number): number {
  if (b !== undefined) return a + b
  else return a
}
const output1 = overload(1)
const output2 = overload(1, 2)
 
overload된 함수에 hover해보면 몇 개의 오버로드가 존재하는지 알려주고 match되지 않을 때에 경고를 날려준다.
 
 
함수의 인자 숫자가 같고, 반환 타입이 같다면 굳이 overload를 사용할 필요 없다. Union Type이 오히려 좋다.
generic때도 그렇고, 복잡한 것보다 간단한 것이 더 효과적인 경우가 많다.
// verbose overload
function overloadLen (s: string): number
function overloadLen (arr: any[]): number
function overloadLen (x: any) {
  return x.length
}
// good
function simpleLen (x: any[] | string) {
  return x.length
}
 
 
 
ref) 
https://dev.to/krzysztofzuraw/typescript-function-overloads-1iff
https://vriz.notion.site/4-More-on-Functions-ff89f764d409440ab4fbbae9a08cfd3a

func in TS (3) : overloading (오버로딩)

댓글