타입 종류(function)

• 함수의 형태를 정의하는 방법
• 매개변수와 리턴값의 타입을 확인하여 할당한다.

1. 매개변수

• 필수 매개변수 : 함수 호출시 반드시 기입해야 함
• 선택 매개변수 : 함수 호출시 생략해도 됨(?으로 표기)
  • 생략시 선택 매개변수의 디폴트값 : undefined
  • 기본타입 지정 가능

  // 선택 매개변수
  function f1(song: string, name?: string) {} // type { song : string, name? : string }
  f1("소향"); // "소향",  undefined
  f1("소향", "I have nothing"); // "소향",  "I have nothing" 
  f1("소향", undefined); // "소향",  undefined

  // 선택 매개변수 (기본값 제공)
  function f2(song: string, name = "kim") {} // type : { song :string , name ?: string }
  f2("소향"); // "소향",  "kim" 
  f2("소향", "I have nothing"); // "소향",  "I have nothing"
  f2("소향", undefined); // "소향",  "kim" 

• 나머지 매개변수 : 여러개의 매개변수 사용시 해당 매개변수부터 마지막 매개변수까지 단일배열로 저장되어 전달되거나 튜플로 전달된다.
  • 조건 : 함수 선언시 마지막 매개변수여야 한다.

    function f3(singer: string, ...songs: string[]) {} // 여러 개의 인자 사용 가능
    function f3(singer: string, ...songs: [string, string]) {} // 3개의 인자

2. 리턴값

2-1. void

• 함수 반환타입 선언을 위해 타입스크립트에서 사용하는 키워드
• 함수에서 반환되는 모든 값을 무시하여 아무것도 반환되지 않는다.
• 목적 : 정상적인 경우에 함수가 값을 반환하지 않은 경우 사용된다. (return문이 없거나 값을 반환하지 않는 return문)

// JavaScript 함수는 명시적인 반환문이 없을 때에는 자동으로 undefined를 반환하지만,
// TypeScript에서의 void는 함수의 반환 타입을 명시적으로 무시함.
function f(song: string): void {
    console.log(""); // OK
    return; // OK
    return undefined; // OK
    return true; // Error
}

2-2. never

• 함수 반환타입 선언을 위해 타입스크립트에서 사용하는 키워드
• 아무것도 반환하지 않는다.
• 목적 : 정상적으로 종료되지 않을 때 의도적으로 오류를 발생시켜서 예외처리나 무한루프와 같은 상황에서 사용된다.

function fail(message: string): never {
    throw new Error(`error: ${message}`);
}
function work(param: unknown) {
    if (typeof param !== "string") {
        fail(`param should be a string, not ${typeof param}`);
    }
    param.toUpperCase();
}

3. 명시적 반환타입

• 타입스크립트에서는 자바스크립트와 달리 명시적으로 함수의 반환타입을 지정해줄 수 있다. 지정하지 않는 경우, 추론시스템에 의해 반환 타입이 추론된다.

	function a(song: string): string {}

매개변수의 타입은 string, 반환타입은 string으로 명시적으로 지정해준다.

5. 함수 타입

• 함수 타입은 특정 함수의 타입을 나타냅니다.
• 반환타입과 매개변수를 정의하고 해당 타입을 변수에 할당하거나 다른 곳에서 사용할 수 있다.

type AddFunction = (a: number, b: number) => number; // 함수타입 : AddFunction
const add: AddFunction = (x, y) => x + y;

4. 호출 시그니쳐

• 호출 시그니처는 객체나 클래스 등이 호출 가능한 인스턴스로 동작하는 경우, 해당 호출에 대한 타입을 정의할 때 사용된다.

interface AddFunction {
    (a: number, b: number): number;
}
const add: AddFunction = (x, y) => x + y; 
// 호출 시그니쳐 : AddFunction

명시적 반환타입 vs 함수타입 vs 호출 시그니처

// 명시적 반환타입
function addWithReturnType(a: number, b: number): number {
    return a + b;
}
// 함수타입
type AddFunctionType = (a: number, b: number) => number;
const addWithType: AddFunctionType = (x, y) =>
 x + y;
// 호출 시그니처
type AddFunctionInterface = {
    (a: number, b: number): number;
}
const addWithInterface: AddFunctionInterface = (x, y)=> x + y;

5. 함수 오버로드

• 함수가 다양한 매개변수와 반환타입 조합을 가질 수 있도록 하는 기능
  • 오버로드 시그니처 : 함수가 다양한 입력형태를 받을 수 있도록 정의하는 부분이다.(구문 오류 생성 여부 결정시 확인하는 부분으로, ts 파일이 js 파일로 바뀌면 지워진다.)
    • 호출 시그니처 호환성 : 구현 시그니처에 있는 동일한 인덱스의 매개변수에 할당할 수 있어야 함.
  • 구현 시그니처 : 실제로 함수의 동작을 정의하는 부분. 오버로드된 시그니처들에 공통적으로 적용되는 코드가 들어가는 부분이다.

// 오버로드 시그니처
function f(data: string): string;
function f(data: string, needle: string, haystack: string): string;
function f(getData: () => string): string; // Error : 호출시그니처 호환성x

// 구현 시그니처
function f(data: string, needle?: string, haystack?: string): string {
    return needle && haystack ? data.replace(needle, haystack) : data;
}