글 작성 시 사용한 TypeScript 버전 → 4.6.3
⚽️ 목표
함수 overloading을 이용하 좀 더 TypeSafe하고 유연한 함수를 만들어보자!
1. Overloading
같은 함수의 이름을 지니고 있으나 매개변수, 리턴타입등의 특징이 다른 여러개의 함수를 생성하게 해줌
•
Type Union으로도 가능하나 Type Union의 경우 매개변수의 값에 대한 or 그리고 반환값에 대한 or 밖에 지정해주지 못함
→ A 타입의 매개변수 시 A 타입으로 반환
→ B 타입의 매개변수 입력 시 B 타입으로 반환
과 같은 엄격한 Typing 불가
예시
const testFunc =(Arg: string | number) : string | number =>
// ...생략
TypeScript
복사
타입 설명
•
Arg는 string또는 number 타입이다.
•
반환값은 Arg와 무관하게 string 또는 numer 이다.
•
Arg가 string 일때 반환값 또한 string 또는 Arg가 number일 경우 반환 값 또한 number과 같은 설정불가. → TypeScript의 제일 장점 중 하나인 타입추론의 유연함과 엄격함이 존재하지 않는 코드로 작성됨.
2. 해결 전 상황
의도한 상황
•
arg1이 "A"일 경우 arg2 없어도 됨(없어야함 -> 타입추론의 정확성을 위해)
•
arg1이 "B"일 경우 arg2는 반드시 string 타입로 존재해야함
interface TestFuncDef {
arg1 : "A" | "B";
arg2? : string;
}
const testFunc : TestFuncDef = (arg1, arg2) => {
// arg1이 "A"일 경우 arg2 없어도 됨(없어야함 -> 타입추론의 정확성을 위해)
// arg1이 "B"일 경우 arg2는 반드시 string 타입로 존재해야함
}
TypeScript
복사
•
위와 같은 코드로 testFunc 함수를 사용 중 이었으나 TS 엔진은 파라미터 조건에 대한 타입 추론을 못하는 중
•
코드 작성 시 arg1이 “A”일 경우 arg2를 입력하지 않는다 정도의 수동적인 개발중 이였음
3. 해결
// 함수 선언 부분
interface TestFuncDef {
(arg1: "A", arg2: string): void;
(arg1: "B") : void;
}
const testFunc : TestFuncDef = (arg1, arg2?) => {
// 생략
}
// 함수 호출 부분
TypeScript
복사
•
인터페이스를 이용한 함수 오버로딩으로 함수 호출 시 두가지 경우의 수에 대한 선언 → 2. 의도한 상황 참조
•
함수 내부에 사용될 경우 arg1은 함수 호출 시 항상 존재하지만 arg2는 경우에 따라 존재하지 않을 수 도 있으므로 옵셔널 파라미터를 사용해 함수 내부에서 걸러내는 로직을 추가