[함수] 함수 매개변수

함수 매개변수 

- 명시적 타입 정보가 선언되지 않으면 타입을 알 수 없어 타입스크립트가 이를 any 타입으로 간주하며 매개변수 타입은 무엇이든 될 수 있음

- 매개변수 타입 또한 타입 애너테이션으로 함수 매개변수의 타입을 선언할 수 있음

- 매개변수에 타입 애너테이션을 추가하지 않아도 실행되기는 하지만 타입스크립트는 타입 오류로 오류를 계속 알림

 

 

1. 필수 매개변수

- 자바스크립트는 인수의 수와 상관없이 함수를 호출할 수 있음, 하지만 타입스크립트는 함수에 선언된 모든 매개변수가 필수라고 가정함

- 함수가 잘못된 수의 인수로 호출되면, 타입스크립트는 타입 오류의 형태로 이의를 제기함

- 다음 singTwo 함수는 두 개의 매개변수가 필요하므로 하나 혹은 세 개의 인수를 전달하는 것은 모두 오류를 알림

function singTwo(first: string, second: string){
  console.log(`${first} / ${second}`);
}

singTwo("Ball and Chain"); // Error

singTwo("I will Survive", "Higher Love"); // OK

singTwo("Go Your Own Way", "The Chain", "Dreams"); // Error

 

- 함수에 필수 매개변수(required parameter)를 제공하도록 강제하면 예상되는 모든 인숫값을 함수 내에 존재하도록 만들어 타입 안정성을 강화하는데 도움이 됨 

 

 

2. 선택적 매개변수

- 만약 타입스크립트가 이러한 선택적 매개변수에 인수를 제공하지 못하는 경우, 타입스크립트가 오류를 보고 하지 않길 바라는 경우 → 선택적 객체 타입 속성과 유사하게 타입 애너테이션의 : 앞에 ?를 추가해 매개변수가 선택적이라고 표시

- 함수 호출에 선택적 매개변수(optional parameter)를 제공할 필요 없음

- 선택적 매개변수에는 항상 | undefined가 유니언 타입으로 추가 되어 있음 → 따라서 항상 암묵적으로 undefined가 될 수 있음

 

- 아래의 singer는 string | undefined 타입으로 시작한 후 if문에 따라 stirng 타입으로 좁혀짐 

function  announceSong(song: string, singer?: string){
  console.log(`Song: ${song}`);
  
  if(singer){
    console.log(`Singer: ${singer}`);
  }
}

announceSong("Greensleeves"); // OK
announceSong("Greensleeves", undefined); // OK
announceSong("Greensleeves", "Sia"); // OK

 

- ?으로 표시된 선택적 매개변수가 아닌 매개변수는 값이 명시적으로 undefined일지라도 항상 제공되어야 함

function announceSongBy(song: string, singer: string | undefined){ /* ... */ }

announceSongBy("Greensleeves");
// Error: Expected 2 agrguments, but got 1

announceSongBy("Greensleeves", undefined); // OK
announceSongBy("Greensleeves", "Sia"); // OK

 

- 함수에서 사용되는 모든 선택적 매개변수는 마지막 매개변수여야 함

- 필수 매개변수 전에 선택적 매개변수를 위치시키면 구문 오류가 발생함

 

 

3. 기본 매개변수

- 타입스크립트의 타입 추론은 초기 변숫값과 마찬가지로 기본 함수 매개변수에 대해서도 유사하게 작동함

- 매개변수에 기본값이 있고 타입 애너테이션이 없는 경우, 타입스크립트는 해당 기본값을 기반으로 매개변수 타입을 유추함

function rateSong(song: string, rating = 0){
  console.log(`${song} gets ${rating}/5 starts!`);
}

rateSong("Photograph"); // OK
rateSong("Set Fire to the Rain", 5); // OK
rateSong("Set Fire to the Rain", undefined) // OK

rateSong("At Last!", "100"); // Error : parameter of type 'number | undefined'

 

 

4. 나머지 매개변수

- 스프레드 연산자는 함수 선언 마지막 매개변수에 위치하고, 해당 매개변수에서 시작해 함수에 전달된 '나머지' 모두 단일 배열에 저장되어야 함을 나타냄

- 스프레드 연산자를 통해 자바스크립트는 일부 함수가 임의의 수를 인수로 호출 할 수 있도록 만들어 줌

- 타입스크립트도 이러한 나머지 매개변수(rest parameter)의 타입을 일반 매개변수와 유사하게 선언할 수 있음

- but, 인수 배열을 나타내기 위해 끝에 [] 구문을 추가해야 한다는 차이점이 있음

function singAllTheSongs(singer: string, ...songs: string[]){
  for(const song of songs){
    console.log(`${song}, by ${singer}`);
  }
}

singAllTheSongs("Day6"); // OK
singAllTheSongs("Lady Gaga", "Bad Romance", "Just Dance", "Poker Face"); // OK

singAllTheSongs("Ella Fitzaerald" 2000); // Error

 

 

 

** reference : 「러닝 타입스크립트」, 한빛미디어