함수의 타입

주고받는 값에 형태를 적습니다

함수에는 두 자리에 타입을 적습니다. 받는 값(매개 변수)과 돌려주는 값(반환)입니다.

function 이름(매개변수: 타입): 반환타입 {
	return 돌려줄 값;
}

매개 변수는 반드시 적어야 합니다. 무엇이 들어올지 코드만 보고는 알 수 없어 추론할 것이 없기 때문입니다. 적지 않으면 any 가 되어 그 자리의 검사가 꺼집니다(1.5).

더하는 함수

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

console.log(add(3, 4));

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

console.log(add(3, "넷"));

JavaScript 였다면 "3넷" 이 나왔을 자리입니다. + 는 한쪽이 글자면 이어 붙이기 때문입니다(JS 1.6).

반환 타입은 대개 적지 않아도 됩니다

return 하는 값을 보고 정해집니다. 그래도 적으면 좋은 까닭은 함수 안쪽에서 잘못을 잡아 주기 때문입니다.

// 적지 않아도 number 로 정해집니다.
function add(a: number, b: number) {
	return a + b;
}

function shout(text: string): number {
	return text.toUpperCase();
}

console.log(add(3, 4));

shout 이 number 를 돌려준다고 적어 두었는데 글자를 돌려주고 있습니다. 적어 두지 않았다면 오류가 아니라 그냥 글자를 돌려주는 함수가 되고, 잘못은 그 값을 숫자처럼 쓰는 다른 자리에서 드러났을 것입니다.

돌려줄 것이 없으면 void

function log(message: string): void {
	console.log(`[알림] ${message}`);
}

log("저장했습니다");

const r = log("끝");
console.log(r);

void 는 돌려주는 값을 사용하지 말라는 표시입니다. 실제로 담기는 것은 undefined 입니다.

함수 자체의 타입

함수를 값으로 다룰 때(JS 2.6) 그 값의 타입도 적을 수 있습니다. 화살표로 받는 것과 돌려주는 것을 잇습니다.

type Formatter = (value: number) => string;

const won: Formatter = v => `${v.toLocaleString("ko-KR")}원`;
const percent: Formatter = v => `${v}%`;

console.log(won(1000));
console.log(percent(30));

v 에 타입을 적지 않았습니다. Formatter 라고 적어 두었으니 숫자라는 것을 알기 때문입니다. 이것이 함수 타입을 적어 두는 값입니다 — 한 번 적고 여러 번 덜 적습니다.

처음에 자주 걸리는 것

직접 해보기

function area(width: number, height: number): number {
	return width * height;
}

console.log(area(3, 4));

type Decorate = (text: string) => string;

const bracket: Decorate = t => `[${t}]`;
const quote: Decorate = t => `"${t}"`;

console.log(bracket("알림"));
console.log(quote("홍길동"));

이 단원의 정리