TypeScript 함수 타입 정리

Hushed_Mind·2025년 4월 8일

TypeScript

목록 보기

6/10

오랜만에 쓰는 TypeScript 블로그다...
요즘 정보처리기사 실기 준비도 하고 있고, 블로그도 이전 중이라 정신이 없다 😭
그래도 꾸준히 기록은 해보자! 오늘은 TypeScript에서 함수의 타입에 대해 정리해보자.

함수의 타입 정의 방법

자바스크립트와 유사하지만, 타입을 명시하는 것이 TypeScript의 핵심이다.

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

// 함수의 반환값 타입은 자동으로 추론되기 때문에 생략가능.
function func(a: number, b: number) {
	return a+b;
}

화살표 함수 타입 정의

const add = (a: number, b: number): number => a + b;

// 화살표 함수도 마찬가지로 생략이 가능하다.
const add = (a: number, b: number) => a + b;

매개변수 기본값 설정하기

아래와 같이 함수의 매개변수에 기본값이 설정되어있으면 타입이 자동으로 추론된다. 이러한 경우에는 타입 정의를 생략해도 된다.

function introduce(name = "홍길동")  {
	console.log(`name : ${name}`);
}

// 기본값과 다른 매개변수의 타입을 정의하면 오류 발생
function introduce(name:number = "홍길동") {
	...
}

// 기본값과 다른 타입의 값을 인수로 전달해도 오류 발생
introudce(1);

선택적 매개변수 설정하기

? 를 붙이면 해당 매개변수는 선택적으로 생략 가능하다.

function introduce(name = "홍길동", age?: number) {
	console.log(`name : ${name}`);
  	console.log(`age : ${age}`);
}

introduce("홍길동",24);

introduce("홍길동");

선택적 매개변수의 타입은 number | undefined로 추론된다.
따라서 연산 등에 사용하려면 타입 좁히기가 필요하다:

function introducee(name = "홍길동", age?: number) {
	console.log(`name: ${name}`);
  	if(typeof age === "number") {
    	console.log(`age: ${age + 10}`);
    }
}

📌 선택 매개변수는 항상 마지막에 위치해야 한다!

나머지 매개변수

자바스크립트의 rest 파라미터(나머지 매개변수) 관련 내용이다.

다음과 같이 여러개의 숫자를 인수로 받는 함수가 있다고 가정해보자.

function getSum(...rest) {
	let sum = 0;
  	rest.forEach((item) => (sum += item));
  	return sum;
}

getSum 함수는 나머지 매개변수 rest로 배열 형태로 number 타입의 인수들을 담은 배열을 전달 받는다. 이때 rest 파라미터의 타입은 아래와 같이 정의하면 된다.

function getSum(...rest: number[]) {
	let sum = 0;
  	rest.forEach((item) => (sum += item));
  	return sum;
}

이때 만약 나머지 매개변수의 길이를 고정하고 싶다면 아래와 같이 튜플 타입을 이용해도 된다.

function getSum(...rest: [number, number, number]) {
	let sum = 0;
  	rest.forEach((item) => (sum += item));
  	return sum;
}

함수 타입 표현식

함수 타입을 타입 별칭으로 선언해서 재사용 가능!

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

const add: ADD = (a,b) => a + b;

이렇게 함수 타입 표현식을 이용하면 함수 선언 및 구현 코드와 타입 선언을 분리할 수 있어 유용하다.

함수 타입 표현식은 아래와 같이 여러개의 함수가 동일한 타입을 갖는 경우에 요긴하게 사용된다.

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

const ADD: Operation = (a, b) => a + b;
const SUB: Operation = (a, b) => a - b;
const MULTIPLY: Operation = (a, b) => a * b;
const DIVIDE: Operation = (a, b) => a / b;

호출 시그니쳐

함수 타입 표현식과 비슷하지만 객체 형태로 표현 가능

type Operation = {
	(a:number, b:number) : number;
}

const ADD: Operation = (a, b) => a + b;
const SUB: Operation = (a, b) => a - b;
const MULTIPLY: Operation = (a, b) => a * b;
const DIVIDE: Operation = (a, b) => a / b;

// 호출 시그니처 아래에 프로퍼티를 추가 정의하는 것도 가능
// => 하이브리드 타입

type Operation = {
	(a:number, b:number) : number;
  	name: string;
}

const ADD: Operation = (a, b) => a + b;

정리

기능	문법 예시	설명
기본 함수	`function func(a:number): number`	매개변수 & 반환 타입 지정
화살표 함수	`(a:number, b:number) => number`	타입 지정 + 생략 가능
선택 매개변수	`age?: number`	undefined 포함된 유니온 타입
나머지 매개변수	`...rest: number[]`	여러 인수 처리
함수 타입 별칭	`type Add = (a:number, b:numbeer) => number`	재사용성 ↑
호출 시그니처	`{(a:number, b:number): number}`	하이브리드 타입에도 사용 가능