[TYPESCRIPT] 함수 타입 정의하기 - TypeScript에서 함수 형태를 명확하게 설계하는 방법

TypeScript에서 함수는 객체와 동일하게 “타입”을 가진 존재입니다. 따라서 함수의 매개변수(parameter), 반환값(return type), 호출 방식(call signature)까지 명확하게 타입을 정의하는 것은 안정적인 코드 작성의 핵심입니다. 

 

기본적인 함수 타입 정의

함수는 매개변수 타입과 반환 타입을 지정하여 정의할 수 있습니다.

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

• a: number → 매개변수 타입
• b: number → 매개변수 타입
• : number → 반환 타입(Return Type)

TypeScript는 반환 타입을 자동 추론하기도 하지만, 공개 API(public function)는 반환 타입을 명시하는 것이 권장 사항입니다.

 

함수 표현식(Function Expression) 타입 정의

함수를 변수에 할당하는 형태라면 변수 자체에 타입을 지정할 수 있습니다.

const multiply: (x: number, y: number) => number = (x, y) => {
  return x * y;
};

이 방식의 장점은 함수 타입을 다른 변수에도 재사용할 수 있다는 점입니다.

 

타입 별칭(Type Alias)을 이용한 함수 타입

여러 함수가 같은 형태를 가질 경우, Type Alias로 함수 타입을 정의하면 편리합니다.

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

const add: Calculator = (a, b) => a + b;
const sub: Calculator = (a, b) => a - b;

실무에서는 “비즈니스 로직 형태가 동일한 함수들”을 묶는 데 자주 사용됩니다.

 

인터페이스(interface)를 활용한 함수 타입 정의

Type Alias와 유사하지만, 인터페이스는 속성 + 함수 타입도 함께 정의할 수 있어 객체 지향 패턴에서 유리합니다.

단일 호출 형태만 정의할 수도 있고, 속성과 함께 결합할 수도 있습니다.

1. 단일 호출 시그니처(Call Signature)만 정의

interface Login {
  (id: string, pwd: string): boolean;
}

const login: Login = (id, pwd) => {
  return id === "admin" && pwd === "1234";
};

2. 속성과 함수 타입을 함께 정의

interface Service {
  name: string;
  execute: (param: string) => void;
}

const s: Service = {
  name: "MyService",
  execute(param) {
    console.log(param);
  }
};

이 패턴은 “클래스 없이 인터페이스 기반 설계”를 많이 사용하는 프로젝트에서 강력합니다.

 

선택적 매개변수(Optional Parameter)

함수의 매개변수가 필수가 아닐 경우 ?를 사용합니다.

function greet(name: string, message?: string) {
  console.log(`${name}: ${message ?? "안녕하세요"}`);
}

greet("Alice");
greet("Bob", "환영합니다");

선택적 매개변수는 반드시 필수 매개변수 뒤에 배치해야 합니다.

 

기본값(Default Value) 매개변수

ES6처럼 TypeScript도 기본값을 지원하며, 기본값이 있으면 자동으로 선택적 매개변수로 취급됩니다.

function echo(msg: string = "Hello") {
  console.log(msg);
}

기본값을 지정하면 함수 호출이 훨씬 유연해집니다.

 

나머지 매개변수(Rest Parameter)

“가변 인자”를 받는 함수는 ...args를 사용합니다.

function sum(...nums: number[]) {
  return nums.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4);

Rest 타입은 반드시 배열 타입으로 지정됩니다.

 

this 타입 지정하기

JavaScript의 this는 동적으로 바인딩되기 때문에, TypeScript에서는 this 위치에 타입을 지정할 수 있습니다.

interface Cat {
  name: string;
  sound(this: Cat): void;
}

const cat: Cat = {
  name: "Navi",
  sound() {
    console.log(`${this.name}가 야옹`);
  }
};

DOM 핸들러나 객체 메서드의 타입 안정성을 강화하는 데 유용합니다.

 

함수 오버로드(Function Overload)

동일한 함수가 여러 타입의 입력을 처리해야 하는 경우 오버로드 시그니처를 정의할 수 있습니다.

function getValue(x: number): number;
function getValue(x: string): string;

function getValue(x: number | string) {
  return x;
}

getValue(10);     // number
getValue("hi");   // string

클린한 API 설계가 필요한 라이브러리 개발에서 자주 사용됩니다.

 

함수 타입의 좋은 설계 기준

• 함수의 의도를 타입으로 명확하게 표현한다.
• 매개변수와 반환 타입을 반드시 지정한다(특히 외부 API).
• 불필요한 타입 선언은 피하고, 가능한 타입 추론을 활용한다.
• 복잡한 함수 구조는 타입 별칭 또는 인터페이스로 분리한다.

---

 

TypeScript에서 함수 타입 정의는 단순히 문법을 배우는 수준이 아니라, 안정적인 API 설계·가독성 향상·버그 예방에 직결되는 핵심 기술입니다. 특히 Type Alias와 인터페이스를 활용한 함수 타입 설계는 실무에서 가장 많이 사용되는 패턴입니다.