📘 TypeScript - 함수

TypeScript에서 함수는 자바스크립트처럼 동작하지만, 정적 타입 덕분에 더 안전하고 명확하게 정의할 수 있습니다. 이번 글에서는 함수 정의, 옵셔널 파라미터, 나머지 매개변수, this 타입, 오버로드 등 TypeScript 함수 문법의 핵심을 정리합니다.

 

 

✅ 함수 타입 정의

함수의 매개변수와 반환값의 타입을 명시할 수 있습니다.

function add(num1: number, num2: number): number {
  return num1 + num2;
}

 

반환값이 없는 함수는 void 타입을 사용합니다.

 

function printHello(): void {
  console.log('Hello');
}

 

❓ 옵셔널 파라미터 (Optional Parameter)

 

파라미터에 ?를 붙이면 선택적으로 받을 수 있습니다.

function hello(name?: string): string {
  return `Hello, ${name || 'World'}`;
}

hello();       // "Hello, World"
hello("Sam");  // "Hello, Sam"

⚠️ 옵셔널 파라미터는 항상 가장 뒤에 와야 합니다.

 

 

기본값을 지정하는 방법도 있습니다.

function hello2(name = 'World'): string {
  return `Hello, ${name}`;
}

 

📦 나머지 매개변수 (Rest Parameters)

 

여러 개의 값을 하나의 배열로 받을 수 있습니다.

function add(...nums: number[]): number {
  return nums.reduce((total, num) => total + num, 0);
}

add(1, 2, 3, 4); // 10

 

👤 this 타입 지정

 

함수에서 this의 타입도 명시할 수 있습니다. 첫 번째 매개변수 자리에 this 타입을 선언하면 됩니다.

interface User {
  name: string;
}

const Sam: User = { name: 'Sam' };

function showName(this: User, age: number, gender: 'm' | 'f') {
  console.log(this.name, age, gender);
}

const bound = showName.bind(Sam);
bound(30, 'm'); // Sam 30 m

일반 함수와는 달리, 화살표 함수는 this를 바인딩하지 않습니다.

 

🔁 반환 타입 조건 분기

 

조건에 따라 서로 다른 타입을 반환할 수 있지만, 이럴 경우 TypeScript가 정확한 반환 타입을 추론하지 못할 수 있습니다.

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

function join(name: string, age: number | string): User | string {
  if (typeof age === 'number') {
    return { name, age };
  } else {
    return "나이는 숫자로 입력해주세요";
  }
}

 

이 경우, 호출부에서 타입을 정확히 분기 처리하거나 함수 오버로드를 사용하는 것이 좋습니다.

 

 

🎯 함수 오버로드 (Function Overload)

같은 이름의 함수지만 매개변수의 타입/갯수에 따라 다르게 동작하게 할 수 있습니다.

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

// 오버로드 시그니처
function join(name: string, age: string): string;
function join(name: string, age: number): User;

// 실제 구현
function join(name: string, age: number | string): User | string {
  if (typeof age === 'number') {
    return { name, age };
  } else {
    return "나이는 숫자로 입력해주세요";
  }
}

const sam: User = join('Sam', 30);
const jane: string = join('Sam', '25');