함수 - 오버로딩

@2023/09/19

안녕하세요 lika-7입니다

이번 시간에는 TypeScript의 함수의 오버로딩 개념에 대해 정리하겠습니다

오버로딩이란

💡

동일한 이름을 가진 함수가 매개변수만 다른 여러버전의 함수를 만드는 것을 오버로딩이라고 합니다

사용 이유

✅

파라미터만 달라지고, 비슷한 로직이 반복되는 경우 사용 합니다 함수 관리를 위해 사용한다고 생각하면 됩니다

//TypeScript

function add1(a: string, b: string){
    return a+ b
}

function add2(a: number, b: number){
    return a+ b
}
//같은 개수의 매개변수를 받아 처리하는 함수가 단지 타입이 다르다고 2개를 만들어서 이용한다
//이는 오버로딩을 이용해 제어 할 수 있다
add1('hello', 'world~')
add2(1,2)

위의 코드에서 같은 개수의 매개변수를 받아 처리하는 함수가 단지 타입이 다르다고 2가지의 함수를 만들어 이용합니다

이는 타입스크립트의 오버로드 기능을 이용해 제어 할 수 있습니다.

오버로딩 문법 (오버로딩 사용 방법)

타입스크립트에서 오버로딩을 선언하는 방법은 아래와 같습니다.

포맷은

1. 타입을 위한 함수선언

2. 타입을 위한 함수선언

3. 함수 구현 부분 입니다

//TypeScript

function add(a: string, b: string): string // 타입 선언
function add(a: number, b: number): number // 타입 선언
function add(a: any, b: any) { //함수 구현 부분, any가 매개변수로 들어옴
    return a+ b
}

add('hello', 'world~');
add(1, 2);

첫번째 타입을 위한 함수선언

function add(a: string, b: string): string

add 함수를 이용해 a,b 매개변수와 return 타입을 string으로 하고 싶습니다. 라는 의미입니다

두번째 타입을 위한 함수선언

function add(a: number, b: number): number

add 함수를 이용해 a,b 매개변수와 return 타입을 number로 하고 싶습니다. 라는 의미입니다

함수 구현

function add(a: any, b: any) { //함수 구현 부분, any가 매개변수로 들어옴
    return a+ b
}

함수 구현 부분의 매개 변수 타입은 any 입니다. any 타입이기에 위해 선언한 string 타입과 number 타입에 대응 할 수 있습니다.

함수 실행

오버로딩을 통해 비슷한 형식을 가진 함수에 2가지 타입을 대응이 가능해졌습니다

add('hello', 'world~');
add(1, 2);

정리

💡

1. 비슷한 사용법을 가진 함수는 여러개의 함수를 선언하지 않더라도 타입만 선언하여 관리 할 수 있습니다 2. 자바스크립트는 문법을 유연하게 사용하여 위와 같은 문법을 사용할 필요가 없지만 3. 타입스크립트는 문법을 엄격하게 사용해야 하기에 사용법이 여러개이면 여러개의 사용법을 명시해주어야 합니다