타입스크립트 2 - 함수

* 타입스크립트 플레이그라운드로 온라인에서 실행해볼 수 있다.

 

Optional Parameters

optional parameter가 undefined가 아닌지 확인한 후에 사용한다.

let printSomething1 = (a: number, b?: number): void => {

    if(typeof b !== undefined) console.log(a+b);

    else console.log(a);

};

printSomething1(1,2); // 3

printSomething1(1); // 1

Default Parameters

function applyDiscount1(price: number, discount: number = 0.05): number {

    return price * (1 - discount);

}

 

function applyDiscount2(price: any, discount = 0.05): number {

    return price * (1 - discount);

}

console.log(applyDiscount1(100)); // 95

console.log(applyDiscount2(100)); // 95

Rest Parameters

...numbers던 numbers던 배열을 전달하면 함수 내에서 배열로 사용할 수 있지만 함수를 호출할 때 매개변수를 쓰는 방식이 다르다.

function getTotal(first: number, ...numbers: number[]): void {

    let total = 0;

    numbers.forEach((num) => total += num);

    console.log(first + total);

}

const numbers : number[] = [1,2,3];

//getTotal(10,[1,2,3]); // Argument of type 'number[]' is not assignable to parameter of type 'number'.

getTotal(10,1,2,3); // 16

getTotal(10, ...numbers); // 16

function getTotal2(first: number, numbers: number[]): void {

    let total = 0;

    numbers.forEach((num) => total += num);

    console.log(first + total);

}

//getTotal2(10,...numbers); //A spread argument must either have a tuple type or be passed to a rest parameter.

getTotal2(10,numbers); //16

함수 오버로딩 Function Overloadings

• TypeScript에서 함수 오버로딩을 사용하면 매개변수 유형과 함수 결과 사이의 관계를 설명할 수 있습니다.
• function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다.

- 매개변수 개수가 같을 때

function add(a:any, b:any):any {} 이 함수에 두 개의 함수를 오버로딩한 것인데, 각 함수 오버로드는 add() 함수에서 지원하는 유형의 조합을 정의합니다. 매개변수와 매개변수가 반환하는 결과 사이의 매핑을 설명합니다.

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

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

function add(a: any, b: any): any {

   return a + b;

}

- 매개변수 개수가 다를 때

함수를 오버로드할 때 필요한 매개변수의 수가 동일해야 합니다. 오버로드에 다른 것보다 더 많은 매개 변수가 있는 경우 추가 매개 변수를 선택 사항으로 만들어야 합니다. 

마지막 매개변수인 c를 optional parameter로 만들어서 2~3개의 매개변수를 가진 함수로 만들고 매개변수가 2개인 함수와 3개인 함수를 오버로딩할 수 있게 됩니다.

 

sum과 sum2 함수는 완전히 같은 동작을 하지만 함수 오버로딩을 사용하면 더욱 정확히 매개변수와 반환값 관계를 설명할 수 있다.

function sum(a: number, b: number): number;

function sum(a: number, b: number, c: number): number;

function sum(a: number, b: number, c?: number): number {

    if (c) return a + b + c;

    return a + b;

}

function sum2(a: number, b: number, c?: number): number {

    if (c) return a + b + c;

    return a + b;

}

 

 

 

출처

https://www.typescripttutorial.net/typescript-tutorial/typescript-function-overloadings/