오버로딩에서 오류가 뜨는 이유

Question

function add (x:string,y:string):string;
function add (x:number,y:number):number;
function add (x:number|string,y:number|string):number|string {
if (typeof x === 'number' && typeof y === 'number') {
return x+y;
} else {
let result = Number(x) + Number(y);
return result;
}
}

const v1:number = add(10,20);
const v2:string = add('1','2');
const v3 = add(1,'10');
강의 잘 보고 있습니다!
1.v3에서 Number('10')을 했을 때 NaN이
나오고 따라서 리턴값이 NaN이지만, typeof NaN === number로 알고
있고 리턴값 타입 때문에 오류가 뜨는 것 아닌 것 같은데 어떤 부분에서
오류가 뜨는지 더 자세히 알 수 있을까요?
2.그리고 v3값은 3번째로 정의한 function add(x,y)를 따라
실행된다 보면 될까요?

Answer

친절한 답변 너무나 감사드립니다~3번째 줄에 유니언이 있어서 함수 실행시 매개변수가

숫자 / 문자 혹은 문자 /숫자 순서대로 들어오면 3번째 라인이 실행되고

결국 else문이 동작해서에러가 없을 줄 알았는데 이게 아닌건가요?

Answer

안녕하세요add 함수를 실제로 구현하는 부분의 타입(3번째줄)은 구현부에서만 사용되고 실제 호출하는 쪽에서는 사용되지 않습니다.따라서 사용하는 쪽에서는 x, y 가 둘 다 숫자이거나 문자열이어야 합니다.그래서add(1,'10') 부분에서 타입 에러가 발생합니다.참고로Number('10') 의 결과는 NaN 은 아니고 숫자 10입니다. 결국 첫 번째와 두 번째 줄은 타입만 정의한 코드이구요v1, v2, v3 모두 세 번째 줄에서 정의한 함수를 실행합니다.타입 오류를 무시하고 실행한다면 v3 는 11 이 됩니다 혹시 이해가 안되시면 또 질문주세요~!

Answer

compile-time과 run-time 으로 나눠서 보는 게 좋을 것 같아요
타입 정보는 compile-time 에만 사용됩니다. 따라서 코드가 실행(run-time)될 때는 전혀 영향을 주지 않습니다
`const v3 = add(1,'10');` 코드는 run-time 에 에러 없이 잘 실행이 됩니다
하지만 compile-time 에는 타입 에러가 발생합니다. (모두 숫자이거나 모두 문자열이라고 타입 정의가 되어 있어서요)

타입스크립트 빌드(compile-time) 시에 타입 에러를 무시하고 빌드할 수 있는 옵션이 있는데요
그렇게 나온 결과물(js 파일)로 실행하면 에러 없이 잘 실행이 될거에요
우리가 vscode 같은 IDE 에서 빨간줄로 만나는 것은 compile-time 의 타입 에러 입니다

으하핳

오버로딩에서 오류가 뜨는 이유

이 글과 비슷한 Q&A

list컴포넌트 생성하기

안드로이드에서만 테마별 색상이 적용안되는 이유

useEffect 의존성 배열 문제

의존성 배열에 filterItems를 넣으면 무한렌더링이 발생합니다.