TypeScript 개념 정리 - 함수와 타입

dobby·2025년 6월 19일

타입스크립트

목록 보기

3/11

함수와 타입

화살표 함수의 타입 정의

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

선택적 property -> a: number, b?:number

함수의 매개변수

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

	return sum;
}

함수 타입 표현식과 호출 시그니처

함수의 타입을 별도로 정의하는 방법

함수 타입 표현식

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

const add1: Add = (a, b) => a + b;

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

호출 시그니처

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

const add1: Operation2 = (a, b) => a + b;
add1.name;

함수 타입의 호환성

특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은가를 판단하는 것

check list

반환값의 타입이 호환되는가
매개변수의 타입이 호환되는가

type A = () => number;
type B = () = > 10;

let a: A = () => 10; // 반환값은 Number
let b: B = () => 10; // 반환값은 Number 리터럴

a = b;
// b = a;

반환값의 Number 타입을 Number 리터럴에 넣을 수 없으니 b = a는 오류

type C = (value: number) => void;
type D = (value: number) => void;

let c: C = (value) => {};
let d: D = (value) => {};

c = d;
d = c;

C와 D는 같은 타입의 함수이므로 모두 호환 가능

type C = (value: number) => void;
type D = (value: 10) => void;

let c: C = (value) => {};
let d: D = (value) => {};

// c = d; // 매개변수를 기준으로 함수에 대한 타입 호환에선 업캐스팅은 안된다.
d = c; // 다운 캐스팅은 허용된다.

// 매개변수의 개수가 다를 때 
// (타입이 같은 매개변수가 있을 경우에만 가능)
type Func1 = (a: number, b: number) => void;
type Func2 = (a: number) => void;

let func1: Func1 = (a, b) => {};
let func2: Func2 = (a) => {};

func1 = func2;
// func2 = func1;

함수 오버로딩

함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 정의하는 방법

자바스크립트에선 지원하지 않고, 타입스크립트에서만 지원한다.

오버로드 시그니처

함수를 오버로딩하기 위해서 각각 매개변수별로 다른 버전을 명시해주는 것

// 오버로드 시그니처
function func(a: number): void;
function func(a: number, b: number, c: number): void;

// 실제 구현부 => 구현 시그니처
function func(a: number, b?: number, c?: number) {
	if(typeof b === 'number' && typeof c === 'number') {
		console.log(a + b + c);
	}
	else {
		console.log(a * 20);
	}
};
// func();
func(1);
// func(1,2);
func(1,2,3);

사용자 정의 타입 가드

조건문 안에서 타입 범위를 한정시켜줄 수 있는 방법

type Dog = {
	name: string;
	isBark: boolean;
}

type Cat = {
	name: string;
	isScratch: boolean;
}

type Animal = Dog | Cat;

function isDog(animal: Animal): animal is Dog {
	return (animal as Dog).isBark !== undefined;
}

function warning(animal: Animal) {
	if(isDog(animal)) {
		// 강아지
		animal // Dog 타입
	}
	else if('isScratch' in animal) { // property가 존재하는가
		// 고양이
	}
}

const isDeveloper = (target: Developer | Person): target is Developer => {
  return (target as Developer).skill !== undefined;
};


if (isDeveloper(kim)) {
  kim.skill; // type kim : Developer
} else {
  kim.age; // type kim : Person
}