TypeScript 함수에 타입 지정하기 – 매개변수와 반환값 타입 (5강)

TypeScript에서 함수 타입 지정의 중요성

TypeScript의 가장 큰 장점 중 하나는 함수의 매개변수(parameter)와 반환값(return value)에 타입을 명시할 수 있다는 것입니다. 이렇게 타입을 명확히 지정하면, 잘못된 타입이 전달되거나 반환될 때 컴파일 단계에서 오류를 사전에 잡을 수 있어 개발의 효율성과 안정성을 크게 향상시킬 수 있습니다.

이번 강의에서는 함수의 매개변수와 반환값에 타입을 지정하는 방법을 다루겠습니다. 함수 타입을 명시적으로 지정하는 방법을 통해 TypeScript의 정적 타입 시스템을 제대로 활용해 보세요.

함수 매개변수에 타입 지정하기

TypeScript에서는 함수 매개변수에 타입을 지정하여, 해당 매개변수로 들어올 수 있는 값의 종류를 제한할 수 있습니다. 매개변수에 타입을 지정하는 기본 문법은 다음과 같습니다.

function greet(name: string): void {
  console.log("Hello, " + name);
}

위 예제에서 함수 greet는 name 매개변수의 타입을 string으로 지정하고 있습니다. 따라서 이 함수에 숫자나 다른 타입의 값을 전달하려고 하면 컴파일 타임에 오류가 발생합니다.

함수 반환값에 타입 지정하기

함수의 반환값에도 타입을 지정할 수 있습니다. 이를 통해 함수가 어떤 타입의 값을 반환하는지 명확히 정의할 수 있습니다.

function add(a: number, b: number): number {
  return a + b;
}

위 예제에서 함수 add는 두 개의 매개변수 a와 b를 숫자 타입으로 받고, 그 결과를 숫자로 반환한다고 명시하고 있습니다. 만약 다른 타입을 반환하려고 하면 오류가 발생합니다.

void 타입으로 반환값이 없는 함수

반환값이 없는 함수에는 void 타입을 사용합니다. void는 함수가 아무것도 반환하지 않음을 명시적으로 나타내며, 주로 console.log처럼 값을 출력하는 함수에서 사용됩니다.

function logMessage(message: string): void {
  console.log(message);
}

이 함수는 message를 출력하지만 아무 값도 반환하지 않기 때문에, 반환 타입을 void로 지정했습니다.

함수의 매개변수와 반환값에 기본값 설정하기

TypeScript에서는 함수의 매개변수에 기본값을 설정할 수도 있습니다. 기본값을 설정하면, 해당 매개변수가 전달되지 않으면 기본값이 사용됩니다.

function multiply(a: number, b: number = 1): number {
  return a * b;
}

위 예제에서 b는 기본값으로 1을 가집니다. 따라서 multiply(5)처럼 두 번째 매개변수를 전달하지 않으면 1이 기본값으로 사용됩니다.

함수의 나머지 매개변수(Rest Parameters) 타입 지정하기

TypeScript에서는 함수의 나머지 매개변수를 배열로 받을 수 있는 기능인 Rest Parameters도 지원합니다. 나머지 매개변수를 배열로 받는 경우, 배열의 요소 타입을 지정할 수 있습니다.

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, num) => acc + num, 0);
}

위 함수는 매개변수로 받은 모든 숫자의 합을 반환하는 함수입니다. ...numbers는 여러 개의 숫자를 배열로 받아, 이를 합산합니다. numbers: number[]로 배열의 요소 타입을 지정해주어, 배열 내 요소들이 모두 숫자 타입이어야 함을 명시합니다.

오버로딩(Overloading) 지원하기

TypeScript는 함수 오버로딩을 지원합니다. 오버로딩을 통해 하나의 함수가 다양한 타입의 매개변수나 반환값을 처리할 수 있도록 할 수 있습니다. 예를 들어, 하나의 함수가 두 가지 다른 타입의 인자를 받도록 정의할 수 있습니다.

function greet(name: string): string;
function greet(age: number): string;
function greet(input: string | number): string {
  if (typeof input === "string") {
    return "Hello, " + input;
  } else {
    return "Your age is " + input;
  }
}

위의 함수는 매개변수로 문자열과 숫자 모두 받을 수 있으며, 타입에 따라 다른 방식으로 반환합니다. 이렇게 여러 타입의 매개변수를 처리하는 방식이 함수 오버로딩입니다.

마무리: TypeScript 함수에서의 타입 지정

이번 강의에서는 TypeScript에서 함수의 매개변수와 반환값에 타입을 지정하는 방법을 살펴보았습니다. 타입을 지정함으로써 함수가 어떻게 동작하는지 명확하게 알 수 있으며, 코드의 오류를 미리 방지할 수 있습니다.

타입스크립트에서는 함수뿐 아니라, 객체, 배열, 제네릭 등 다양한 구조에서 타입을 지정할 수 있습니다. 이러한 기능들은 대규모 애플리케이션에서 코드의 유지 보수성을 크게 향상시킵니다.

다음 강의에서는 클래스와 객체에 타입을 적용하는 방법을 다루겠습니다.

mystory55776 님의 블로그