타입스크립트[TypeScript] | 함수의 파라미터 타입 정의하기

🔍 글을 시작하기 전에

 

해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다.

수정해야 할 부분이 있다면 언제든지 알려주세요!

 

함수의 파라미터 타입 정의

(파라미터 = 매개변수)

 

함수를 타입스크립트에서 정의할 때 함수의 파라미터는 명시적으로 타입을 정의하며 반환 타입은 추론하도록 둔다.
타입스크립트는 몇가지 특수한 상황을 제외하고는 매개변수 타입은 추론하지 않고,

명시적으로 정의한 매개변수를 통해 반환 타입은 자동으로 추론하기 때문이다.

매개변수를 선언할 때 선택적으로 선언할 수도 있다.
선택적 매개변수를 작성하기 위해서는 가장 마지막에 물음표 표시와 함께 작성하면 된다.

  

    
    
    
    
  
function log(message:string, userId?: string) {
    let time = new Date().toLocaleTimeString();
    console.log(time, message, userId || 'Not');
}

log('Page loaded'); // "오전 9:51:29", "Page loaded", "Not"
log('User Signed in', "Jae"); // "오전 9:51:29", "User Signed in", "Jae"

위 코드는 log함수는 message와 userId를 매개변수로 갖는데, userId는 값이 전달 될수도, 안될수도 있으며

userId가 전달되지 않으면 'Not'을 출력하라는 의미이다.

위 방법보다 더 명시적으로 기본값을 작성하여 더 읽기 좋은 코드를 만들 수 있다.

  

    
    
    
    
  
function log(message:string, userId = "Not signed in") {
    let time = new Date().toLocaleTimeString();
    console.log(time, message, userId || 'Not');
}

log('Page loaded'); // "오후 2:25:40",  "Page loaded",  "Not signed in"
log('User Signed in', "Jae"); // "오후 2:25:40",  "User Signed in",  "Jae"

매개변수를 전달받을 때 몇 개의 매개변수가 전달될지 정확히 알 수 없을 경우 자바스크립트에서는 arguments를 사용했었다.

  

    
    
    
    
  
function sum():number {
    return Array.from(arguments).reduce((total,n) => total + n, 0);
}

sum(1,2,3); // Error:: Expected 0 arguments, but got 3.

위 코드는 arguments는 순수 배열이 아니기 때문에 Array.from()을 사용해서 배열로 만들어준 다음,

reduce()를 사용하여 합계를 구하는 함수이다.

하지만 코드를 실행시키면 오류가 발생하면서 total과 n은 any로 타입이 추론된다.

 

이런 문제를 해결하기 위해서는 나머지 매개변수(Rest Parameters)를 사용하면 된다.
안전하게 임의의 매개변수를 전달받을 수 있으며 타입 추론도 number로 잘 되어 안전하게 코드를 작성할 수 있게된다.

  

    
    
    
    
  
function sumSafe(...numbers: number[]):number {
    return numbers.reduce((total,n) => total + n,0);
}

console.log(sumSafe(1,2,3)); // 6

 

한가지 주의해야 할 점은, 나머지 매개변수를 사용할 땐 가장 마지막에 위치해있어야 한다는 것이다.

  

    
    
    
    
  
function sumSafe(a:number, b:number, ...numbers: number[]):number {
    console.log(a); // 100
    console.log(b); // 101
    return numbers.reduce((total,n) => total + n,0);
}

console.log(sumSafe(100, 101, 1,2,3)); // 6