[TS] 함수타입

함수 매개변수

function add(a, b) {
   return a + b;
}
//이건 안됨~

function add(a: number, b: number) {
   return a + b;
}
// 명시적으로 타입 정보가 선언되지 않으면 절대 타입을 알 수 없다.

 

타입스크립트는 함수에 선언된 모든 매개변수가 필수라고 가정한다. -> 타입안정성 강화

선택적 매개변수

type annotation의 앞에 ?를 추가해 매개변수가 선택적이라고 표시한다. 

선택적 매개변수는 항상 | undefined 가 유니언 타입으로 추가 되어있고 암묵적으로 undefined가 될 수 있다.

 

하지만 선택적 매개변수는 | undefined를 포함하는 유니언 타입 매개변수와 다르다.

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

 

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

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

const introduce = (name:string, 
height?:number) => {
   console.log(`이름 : ${name}`);
if(typeof height === 'number'){
// → 내로잉을 통해서 타입 좁혀줌
   	console.log(`키 : ${height + 10}`)   
 	}
}
introduce("김현준"); // OK
introduce("김현준", undefined); // OK
introduce("김현준", 170); // OK

 

기본 매개변수

기본 매개변수에는 기본적으로 값이 제공되기 때문에 해당 타입스크립트 타입에는 암묵적으로 함수 내부에 | undefined 유니언 타입이 추가된다.

타입스크립트는 함수의 매개변수에 대해 인수를 누락하거나 undefined 인수를 사용하여 호출하는 것을 허용한다. 

const introduce4 = (name : string, height = 0) => {
 console.log(`이름 : ${name}`);
 console.log(`키 : ${height + 10}`);
}

함수타입 별칭 

타입 별칭은 특히 함수 타입에 유용하다고 할 수 있다. 

const add = (a : number, b : number): number => a + b;
const sub = (a : number, b : number): number => a - b;
const mul = (a : number, b : number): number => a * b;
const div = (a : number, b : number): number => a / b;

//위를 다음과 같이 표현할 수 있다

type operation = (a : number, b : number) => number;

const add : operation = (a, b) => a + b;
const sub : operation = (a, b) => a - b;
const mul : operation = (a, b) => a * b;
const div : operation = (a, b) => a / b;

 

함수의 매개변수가 콜백함수 일때도 별칭을 입력할 수 있다.

type NumberToString = (input : number) => string;

function usesNumberToString(numberToString : NumberToString) {
    console.log(`The String is : ${numberToString(1234)}`);
}
usesNumberToString((input) => `${input}! Hooray!`) // ok

usesNumberToString((input) => input * 2);
// Error :  Type 'number' is not assignable to type 'string'.

 

void 반환 타입

일부 함수는 어떤 값도 반환하지 않을 수 있음

-> 타입스크립트는 void 키워드를 사용해 반환값이 없는 함수의 타입을 확인할 수 있다.

function logSong(song : string) : void {
  if(!song){
    return; // OK!  return undefined; 도 OK!
  }
  console.log(`${song}`);

  return true;   // Error! - Type 'boolean' is not assignable to type 'void'.
}  ← void를 반환하도록 선언되었으므로 값 반환을 허용하지 않음.

But, 다음과 같이 화살표 함수는 구문 오류 없음!


type VoidReturn = () => void;
const test2:VoidReturn = () => 11;  // OK!
test2().toString(); // ?

 

자바스크립트 함수는 반환되지 않으면 undefined를 반환하지만 void 는 undefined와 동일하지는 않다. 

 

void: 함수의 반환 타입이 무시된다

undefined: 반환되는 리터럴 값이다.

 

void는 타입스크립트 키워드 이다. 

 

never 반환 타입

never 반환 함수는 (의도적으로) 항상 오류를 발생시키거나 무한 루프를 실행하는 함수이다.

함수가 절대 반환하지 않도록 의도하려면 명시적 : never 타입 애너테이션을 추가해 해당 함수를 호출한 후 모든 코드가 실행되지 않음을 나타낸다.

function fail(message : string) : never {
    throw new Error(`Invariant Failure : ${message}`);
    // JS는 return undefined; 가 생략
}