[패캠] 타입스크립트 문법 - 함수 오버로딩 (Overloading) (13/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

13. 함수 - 오버로딩(Overloading)

---

타입스크립트 함수에서 오버로딩 문법을 사용하면, 기본적인 로직과 매개변수의 이름이나 개수도 똑같은 구조의 함수를 단지 타입이 다르다는 이유로 두 개로 만들어서 사용하는 문제를 해결한다. 함수 오버로딩을 통해 하나의 함수에 호출될 때 사용되는 타입만 분기한다.

function add(a: string, b: string): string // 타입 선언1
function add(a: number, b: number): number // 타입 선언2
function add(a: any, b: any) { // 함수 구현
    return a + b
}
add('hello ', 'world~') // 'hello world
add(1, 2) // 3

add('hello ', 2) // error
add(1, 'world~') // error

 

함수 구현부에서 any 타입을 통해서 add 함수 부분에 a와 b라는 매개변수에 무엇이든 들어올 수 있다는 개념이라기 보다는, 함수 오버로딩의 문법을 통해서 타입 선언 1번과 타입 선언 2번에 해당하는 각각의 매개변수가 얼마든지 함수 구현과 일치하게 만들어준다. 그래서 함수 구현부의 any 타입은 실제 타입으로 보기 보다는 위쪽의 두 가지의 타입 선언의 내용이 어떤 방식으로 든 할당이 될 수 있다는 의미이다. 실제로 타입이 명시된 부분은 타입 선언 1, 2 두 가지 밖에 없다.

이러한 방식으로 타입이 다른 함수를 여러 개 만들지 않고, 함수의 타입 선언부를 함수의 구현부 위에 여러 개 만들어주어 같은 함수라도 다른 타입을 사용하는 방법을 여러 개로 관리할 수 있다.

JavaScript의 경우에는 굉장히 유연하게 타입을 사용할 수 있기 때문에 함수 오버로딩과 같은 문법이 사실상 필요하지 않지만, 타입스크립의 경우에는 타입을 엄격하게 지정해야 하기 때문에 사용법을 여러 개 만들 때는 여러 개의 사용법을 정확하게 명시해 줘야 되는 필요성이 있다. 이때 사용하는 방법(문법)을 함수의 오버로딩이라고 부른다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY