[TypeScript] 함수 표현식 & Call∙Constructor Signature

개요

JS와 비교하여 TS에서 함수 타입을 정의하는 방법, 이와 관련한 호출 시그니처와 생성자 시그니처에 대해 정리한다.

 

---

함수 타입 정의

가장 기본적으로 함수를 정의하는 방법은 다음 내용과 같다.

 

1. 함수의 반환값 타입은 추론되기 때문에 생략 가능하다.

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

 

 

 

2. 화살표 함수도 반환값 타입은 생략 가능하다.

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

 

 

 

3. type 별칭을 통해서 함수 타입을 정의할 수 있다.

type GreetFunction = (a: string) => void;
function greeter(fn: GreetFunction) {
	// ....
}

 

 

이와 관련해서 이펙티브 타입스크립트에서는 다음과 같이 설명한다.

이펙티브 TS - 아이템 12) 함수 표현식에 타입 적용하기

JS와 TS에서는 함수 문장(statement)과 함수 표현식(expression)을 다르게 인식한다.

function rollDice1(sides: number): nubmer { // }             // 문장
const rollDice2 = function(sides: number): nubmer { // }     // 표현식
const rollDice3 = (sides: number): nubmer { // }.            // 표현식

 

TS에서는 함수 표현식으로 사용하는 것이 좋다. 함수의 매개변수와 반환값을 함수 타입으로 선언하여 함수 표현식에 재사용할 수 있기 때문이다. 

 

 

매개변수와 반환값을 타입으로 선언하지 않았을 때

function add(a: number, b: number) {return a+b;}
function sub(a: number, b: number) {return a-b;}
function mul(a: number, b: number) {return a*b;}
function div(a: number, b: number) {return a/b;}

 

 

매개변수와 반환값을 타입으로 선언했을 때

// 매개변수와 반환값을 타입화하기
type BinaryFn = (a: number, b: number) => number;

const add: BinaryFn = (a,b) => a+b;
const sub: BinaryFn = (a,b) => a-b;
const mul: BinaryFn = (a,b) => a*b;
const div: BinaryFn = (a,b) => a/b;

 

함수 표현식을 타입화하여 불필요한 코드의 반복을 줄이고 재사용성을 높일 수 있다.

 

 

 

4. 매개변수 기본값 설정하기

매개변수에 기본값을 설정하면 타입 추론이 가능하기 때문에 타입 정의를 생략해도 된다.

function printName(name = "SB") {
	console.log('name: ${name}');
}

printName(name);
printName(1); // ERROR

 

 

 

---

 

Call Signature(호출 시그니처)

호출 시그니처는 함수에서 호출 가능한 프로퍼티를 정의하는 방식이다.

 

type DescribableFunction = {
    description: string;
    // 함수의 타입 정의 | 매개변수가 number, 반환값이 boolean인 함수
    (arg: number): boolean;
}

function doSomething(fn: DescribableFunction) {
    console.log(fn.description + " returned " + fn(0));
}

// 예제 함수
// type으로 지정한 것과 같이, 매개변수가 number이고 리턴값이 boolean
const isNumZero = (num: number) => {
    return num == 0;
}

isNumZero.description = "number is zero"


// 함수 호출
doSomething(isNumZero);

 

위 예제와 같이 TS에서는 함수의 타입을 표현하고, 별도로 지정하여 프로퍼티처럼 사용할 수 있다.

 

---

 

Construct Signature(생성자 시그니처)

TS에서는 new 연산자를 통해서 생성자의 규칙을 선언할 수 있다. 보통 함수 매개변수에 클래스를 전달해서, 함수를 호출할 때 클래스가 초기화되는 로직을 구현할 때 사용한다.

type SomeConstructor = {
	new (s: string): SomeObect;
};

function fn(ctor: SomeConstructor) {
	return new ctor("hello");
}

 

 

---