TS010. 타입스크립트 함수 정의 (Function Definition)

타입스크립트 함수 선언 방식

• 타입스크립트 함수 선언 포맷은 아래 예제코드와 같다.
• 각 파라미터 옆에 파라미터의 타입을 명시해주고, 파라미터 괄호 뒤에는 함수 자체의 반환 타입을 명시해주면 된다.
• 중요한 것은 파라미터 갯수나 타입을 정확히 맞추지 않으면 타입스크립트 검증에 의해 에러가 난다.

function foo(param1: string, param2: string): string {
  return `${param1}, ${param2}`;
}

foo(); // 에러, 파라미터 갯수 부족
foo("a"); // 에러, 파라미터 갯수 부족
foo("a", 1); // 에러, 파라미터 타입이 하나 틀림
foo("a", "b"); // 정상 동작

참고로 반환 타입인 string 은 타입 추론에 의해 잘 추론되어 사실 따로 기재해주지 않아도 된다.

옵셔널 파라미터 (Optional Parameter)

• 파라미터 중 들어와도 되고 안들어와도 되는 것에 옵셔널 기호(?)를 붙여 옵셔널 파라미터로 만들 수 있다.
• 아래 코드는 param2 가 옵셔널 파라미터기 때문에 있어도 되고 없어도 에러가 나지 않는다.

function bar(param1: number, param2?: number) {
  if (param2) {
    return param1 + param2;
  }

  return param1;
}

console.log(bar(10, 20)); // 정상
console.log(bar(10)); // 정상

• 아래 코드는 없어도 param2 에 기본 값이 들어가게 세팅했기 때문에 마찬가지로 없어도 에러가 나지 않는다.

function bar2(param1: number, param2: number = 20) {
  if (param2) {
    return param1 + param2;
  }

  return param1;
}

console.log(bar2(10)); // 정상
console.log(bar2(10, 30)); // 정상

나머지 파라미터 (Rest Parameter)

• 나머지 파라미터의 경우는 배열의 형태로 들어오기 때문에 이전에 list 형태의 타입을 정의할 때랑 동일하게 정의해주면 된다.
• 아래는 string 혹은 number 가 들어올 수 있게 정의한 것이다.

function bar3(...params: (string | number)[]) {
  return params.map((x) => `-> ${x}`);
}

bar3("x", "y", "z", 1, 2);

반환 타입 (Return type)

• 반환 타입에 대해서는 웬만하면 타입 유추 (Type inference) 기능이 정상적으로 작동한다.
• 아래 bar4 예제의 경우 number 를 받아서 number 의 연산 결과를 반환하니 유추가 매우 쉽다.

function bar4(x: number, y: number) {
  return x + y;
}

bar4(10, 20);

• 아래처럼 랜덤의 경우도 유니온 타입으로 반환 타입을 잘 유추한다.

"랜덤" | 100 으로 유니온으로 반환 타입을 잘 유추하고 있다.

function random() {
  return Math.random() > 0.5;
}

function randomReturn() {
  return random() ? "랜덤" : 100;
}

randomReturn();

• 애로우 함수도 일반 함수처럼 반환 타입을 입력하면 된다.

const bar6 = (p1: number, p2: number): number => {
  return p1 - p2;
};

반환 타입을 꼭 입력해야 하는 경우

재귀함수의 반환 타입 (Return type of recursive function)

• 위의 케이스의 경우엔 반환 타입을 사실상 명시하지 않아도 된다.
• 근데 재귀함수의 경우 타입스크립트에서 반환타입을 정상적으로 유추해내지 못한다.
• 재귀함수는 반환 타입을 반드시 명시해주는 것이 좋다.

// 반환타입 없음 에러 발생
function factorial(n: number) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

// 반환타입 추가 정상 작동
function factorial(n: number): number {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

const result = factorial(5); // result is of type number

함수 오버로드 반환 타입

• 오버로드할 때는 반환 타입을 입력해주어야 한다.

function greet(name: string): string;
function greet(age: number): number;
function greet(input: any): any {
  if (typeof input === "string") {
    return `Hello, ${input}`;
  } else if (typeof input === "number") {
    return input * 2;
  }
}

const greeting = greet("Alice"); // greeting is of type string
const ageResult = greet(25); // ageResult is of type number

복잡한 로직의 반환 타입

• 중간에 복잡한 로직이 끼인 경우, 타입스크립트가 간혹 반환 타입을 추측하기 어려워한다.

interface User {
  id: number;
  name: string;
}

function processUser(user: User): { success: boolean; userName: string } {
  // Complex logic goes here
  const userName = user.name.toUpperCase();
  const success = userName.length > 0;

  return { success, userName };
}

const processedUser = processUser({ id: 1, name: "John" });

공개 API 의 반환 타입

• 공개 API 에서는 반환타입을 명시적으로 줘야 훨씬 읽기 쉽고 이해하기 쉽다.

interface ApiResponse {
  status: number;
  data: any;
}

function fetchUserData(userId: number): ApiResponse {
  // API call logic
  return { status: 200, data: { userId, name: "Alice" } };
}

const userData = fetchUserData(123);

특수 반환 타입 1: void

• 아무 것도 반환하지 않는 경우 void 를 반환 타입으로 이용하면 된다.

function noReturn(): void {
  console.log("no return");
}

특수 반환 타입 2: never

• 반환하는 상황 자체가 일어나지 않는 경우 never 를 반환 타입으로 이용하면 된다.

function noReturn2(): never {
  throw "no return but throw";
}

function noReturn3(): never {
  while (true) {}
}