[러닝타입스크립트]Part2. 특징 - chapter5. 함수

🐰 함수

자바스크립트에서는 파라미터와 아규먼트의 수가 일치하지 않아도 함수를 호출할 수 있지만,

자바스크립트의 경우

• 파라미터 > 아규먼트인 경우 파라미터에 undefined 할당
• 파라미터 < 아규먼트인 경우 무시

타입스크립트에서는 타입 에러가 발생한다.

🥕 선택적 파라미터(optional parameter)

파라미터 > 아규먼트일 때, 오류를 보고하지 않도록 하기 위해서는 타입 애너테이션 앞에 ? 물음표를 추가해 ?: 로 선택적 파라미터임을 표시한다.

function introduce(name:string, age?:number){
  console.log(`I'm ${name}.`)
  
  if(age){
  	console.log(`I'm ${age}years old.`)
  }
}

introduce('Suzan', 10); //  "I'm Suzan." "I'm 10years old."
introduce('Hana'); // "I'm Hana." 
introduce('Tina', undefined); // "I'm Tina." 

• 선택적 파라미터에는 항상 :undefined가 유니언 타입으로 추가되어 있다.
  • 선택적 파라미터가 아닌 일반 파라미터는 :undefined 타입이 포함되어 있더라도 반드시 상응하는 아규먼트가 있어야 한다.
    (즉, 파라미터와 아규먼트의 개수가 같아야 한다.)

function introduce(name:string, age = 10){
  console.log(`I'm ${name}.`)
  
  if(age){
  	console.log(`I'm ${age}years old.`)
  }
}

introduce('Suzan', 10); //  "I'm Suzan." "I'm 10years old."
introduce('Hana'); // "I'm Hana." "I'm 10years old."
introduce('Tina', undefined); // "I'm Tina." "I'm 10years old."

• 기본값이 지정된 경우 기본값의 타입 | undefined를 유니언 타입으로 갖는다.

/* optional parameter는 마지막에 위치해야 한다.*/
function intro (age?:number, name:string){}
// A required parameter cannot follow an optional parameter.

• 선택적 파라미터는 마지막 파라미터여야 한다.

🥕 rest 파라미터

rest 파라미터의 타입은 끝에 []를 추가한다.
0개이상의 아규먼트를 받을 수 있다.

function introduce(greeting: string, ...names: string[]){
 if(names.length){
  for(const name of names){
    console.log(`${greeting} ${name}!`)
  }
 } else{
  console.log(greeting);
 }
}

introduce('hello'); // "hello" 
introduce('hi', 'James', 'Summer', 'Jhone');
// "hi James!" 
// "hi Summer!" 
// "hi Jhone!" 

🥕 반환 타입

함수에 다른 값을 가진 여러 개의 반환(return)문이 있다면, 타입스크립트는 return type을 가능한 모든 타입의 조합으로 유추한다.

함수 선언 반환 타입 애너테이션은 아규먼트 목록이 끝나는 ) 와 함수 바디 시작 전{ 사이에 배치한다.
화살표 함수의 경우 => 앞에 배치한다.

function introduce(name:string, age = 10): string {
  return `I'm ${name}, ${age}years old.`
}

function intro = (name:string, age = 10): string => `I'm ${name}, ${age}years old.`

🥕 함수 타입

함수 타입 구문은 화살표 함수와 유사하지만 함수 본문 대신 타입이 있다.

const songs = ['화이팅 해야지', 'Nxde', 'Antifragile'];

/* 파라미터인 callback은 number 타입의 파라미터를 받아 string 타입의 값을 리턴하는 콜백함수이다. */
function songList(callback: (index:number) => string ){
  for(let i = 0; i < songs.length; i++){
    console.log(callback(i));
  }
}

/* number 타입 파라미터를 받아 string 타입을 리턴하는 함수 */
function numberInput(index: number){
  return `${songs[index]}`
}

songList(numberInput); // "화이팅 해야지" "Nxde" "Antifragile" 


/* string 타입 파라미터를 받아 string 타입을 리턴하는 함수 */
function strInput(song: string){
  return `${song}`
}

/* songList의 파라미터인 callback의 타입과 stringInput 타입이 다르므로 오류가 발생한다. */
songList(strInput); 
// Argument of type '(song: string) => string' is not assignable to parameter of type '(index: number) => string'.
//  Types of parameters 'song' and 'index' are incompatible.
//    Type 'number' is not assignable to type 'string'. 

( )소괄호로 묶는 위치에 따라 함수 리턴값의 타입을 나타내거나, 유니언 타입을 구분할 수 있다.

/* string 또는 boolean(타입의 값)을 반환하는 함수 타입 */
let 함수: () => string | boolean;

/* string(타입의 값)을 반환하는 함수 또는 boolean 타입*/
let 함수또는불린: (() => string) | boolean;

🥕 함수 타입 별칭

/* string 타입 파라미터를 number 타입으로 리턴하는 함수 타입 별칭 */
type stringToNumber = (input:string) => number;

let wordToSize: stringToNumber;
// input은 string 타입이고, 리턴값은 number 타입이다.
wordToSize = (input) => input.length;

// 함수를 정의할 때 파라미터는 1개 이하여도 되지만,
// 함수를 호출할 때 아규먼트는 반드시 1개여야 한다.
wordToSize = () => 100;
wordToSize('abc'); // 100 

🥕 void 반환 타입

반환 값 void인 함수는 값을 반환하지 않는 타입이다.
즉, 함수의 반환값이 ① 자체적으로 반환될 수 있는 값도 아니고, ② 사용하기 위한 것도 아니라는 표시이다.

함수 타입을 선언할 때 void를 사용하면 함수에서 반환되는 모든 값은 무시된다.

• 배열의 내장 forEach 메서드는 void를 반환하는 콜백을 받는다.
• 자바스크립트가 아닌, 타입스크립트 키워드이다.

/* 값을 반환하지 않는 return문인 경우 */
function voidFunc(input: string): void{
  return;
}

/* return문이 없는 경우 */
let voidArrow : (input: string) => void;
voidArrow = (input) => console.log(input);

/* 한 줄로 줄이면 
let voidArrow = (input: string):void => console.log(input); */

void는 return undefined 와 동일하지 않다.
void는 함수의 반환 타입이 무시되고,
undefined는 반환되는 리터럴 값이다.

let voidFunc = () => {return; };
let something: string | undefined;
something = voidFunc(); // Type 'void' is not assignable to type 'string | undefined'.

🥕 never 반환 타입

never 반환 함수는 (의도적으로) 항상 오류를 발생시키거나 무한 루프를 실행하는 함수이다.
함수를 절대 반환하지 않도록 의도하려면 명시적 : never타입 애너테이션을 추가해 함수를 호출한 후 모든 코드가 실행되지 않음을 나타낸다.

function fail(message: string): never{
  throw new Error(`에러 이유: ${message}`)
}

/* 파라미터의 타입이 불확실할 때, string 타입이 아닌 경우 코드가 실행되지 않도록 할 수 있다. */
function 불확실한파라미터(para: unknown){
  if(typeof para !== 'string'){
    fail(`파라미터는 ${typeof para}일 수 없고, 반드시 문자열이어야 한다.`);
  }
  
  /* 파라미터가 string 타입일 때 실행할 코드 */
}

unknown 타입은 (any 타입처럼) 모든 타입을 허용한다.
하지만 any 타입과는 다르게 프로퍼티 또는 연산을 하는 경우 컴파일러가 체크하므로, 타입을 좁혀서 사용해야 한다.

void는 아무것도 반환하지 않는 함수를 위한 것이고, never는 절대 반환하지 않는 함수를 위한 것이다.

💡잘 모르겠는 부분

🥕 함수 오버로드

☘️ 오버로드 시그니처

하나의 최종 구현 시그니처와 그 함수의 본문 앞에 서로 다른 버전의 함수 이름, 매개변수, 반환 타입을 여러 번 선언한다.

/* 오버로드 시그니처 */
function createDate(timestamp: number): Date;
function createDate(month: number, day: number, year: number): Date;

/* 구현 시그니처 */
function createDate(monthOrTimestamp: number, day?: number, year?: number) {
  return (day === undefined || year === undefined) ? new Date(monthOrTimestamp) | new Date(year, monthOrTimestamp, day);
}

createDate(554356800);
createDate(7, 20, 2022);
 
// createDate(4, 1);