TypeScript의 function(1)

1. call signature (시그니처)

아래 코드 블럭에 적힌 함수의 signature란 다음과 같다: const add: (a:number, b: number) => number

이처럼 call signature란 이 함수의 원형에 명시된 매개변수 리스트가 정의된 것을 말한다.

const add = (a: number, b:number) => {
    return(a+b);
}

이런 함수의 signature를 우리가 정해줄 수도 있다.

아래 코드를 보면 type Add를 정의해줌으로써 함수의 signature를 우리가 만들어주었다.

그 다음, 밑의 const add 변수에 이 타입을 지정해주었다.

이렇게 함수의 signature를 정의해준 다음, 이 타입을 할당해주면 매개변수에 일일이 타입을 적어줄 필요가 없다.

(ex: const add = (a:number, b:number) => a+b; 라고 쓸 필요가 없다.)

type Add = (a:number, b: number)=>number; //함수 시그니처

const add:Add =(a,b) => a+b; //Add라는 타입을 이용한 함수

 

2. overloading (오버로딩)

함수가 여러 개의 call signature를 가질 때 발생하는 것이 overloading 이다.

아래 코드가 바로 함수를 오버로딩한 예시인데, Add 타입은 b 인자가 string 일 수도 있게 된다.

따라서 이대로 쓰게 되면 const add를 정의할 때 오류가 발생한다.

type Add = {
    (a:number, b: number): number
    (a:number, b: string): number
}

const add: Add = (a, b) => a + b //에러 발생

이 코드는 아래처럼 고치면 해결된다.

type Add = {
    (a:number, b: number): number
    (a:number, b: string): number
}

const add: Add = (a, b) => {
    if (typeof(b)==='number') return a+b;
    else return a;
}

이처럼 함수를 오버로딩할 때는 인자의 타입들에 따라 분기를 나눠 따로 처리해줘야 한다.

 

함수를 오버로딩할 때, 인자의 타입은 자유이다. 아래의 코드처럼 Config라는 사용자 타입을 지정하고, 함수 인자에 이를 적용해도 문제없이 작동한다.

아래의 push라는 함수는 인자가 string일 수도 있고, Config type일 수도 있다. 

따라서 분기문에서 인자 config가 string인지, Config type인지 확인해본 뒤 상황에 맞는 결과값을 출력하도록 한다.

type Config = {
    path: string,
    state: object
}

type Push = {
    (path: string):void
    (config: Config):void
}

const push:Push = (config) => {
    if(typeof config === "string") console.log(config)
    else{
        console.log(config.path, config.state)
    }
}

 

⭐ 오버로딩했는데, 인자의 타입들이 모두 동일한 대신 개수만 다른 경우

Add type은 인자로 number 2개 혹은 3개를 받을 수 있다. 

이 경우 3번째 인자는 선택형 인자가 된다.

(단순하게 생각하면 편하다, 선언한 모든 타입들이 반드시 인자 2개는 가져야 하니까 3번째 인자는 선택인 것이다.)

 

이럴 경우 Add 타입을 할당할 때, 선택형 인자에는 ?를 붙여주는 것을 잊지말자.

그리고 ?인 변수가 존재하는지 존재하지 않는지를 분기문으로 확인해주면 된다.

type Add = {
    (a:number, b:number): number
    (a:number, b:number, c:number): number
}

const add:Add = (a,b,c?:number)=> {
    if(c) return a+b+c;
    else return a+b;
}

add(1,2)
add(1,2,3)