[Typescript] 3. Call Signatures

Nomad Coder - Typescript로 블록체인 만들기 2주과정 3일차 정리

 

1. Call Signatures

- 마우스를 위에 올렸을 때 위에 떠서 함수 인자, 반환 등의 type을 알려줌

 

함수의 type을 설정해서 Call Signature로 전달해주는 방법

// 이 부분이 Call Signature가 된다.
type Add = (a:number, b:number) => number;

// 함수 위에 마우스를 올리면 Add라는 type이 적힌 Call Signature가 뜬다.
const add:Add = (a, b) => a + b;

 

2. Overloading

- function overloading / method overloading이라고도 불림

- 외부 라이브러리를 사용하면서 많이 맞닥뜨리게 될 것.

// Call signature를 길게 작성 -> 하단의 방식이 존재하는 이유는 Overloading 때문.
type Add = {
	(a:number, b:number) : number
}

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

 

함수가 여러개(단순히 여러개가 아니라 서로 다른 여러 개)의 Call signature를 가지고 있을 때 하단처럼 Overloading이 발생함.

type Add = {
	(a:number, b:number) : number // 이런 형태로도 부를 수 있고
	(a:number, b:string) : number // 이런 형태로도 부를 수 있을 때
}

const add:Add = (a, b) => a + b; // b가 number | string이기 때문에 오류가 발생함!

↓

type Add = {
	(a:number, b:number) : number // 이런 형태로도 부를 수 있고
	(a:number, b:string) : number // 이런 형태로도 부를 수 있을 때
}

const add:Add = (a, b) => {
	// b가 string type일 경우에는 a만 return하고
	if(typeof b === "string") return a;
	// 아닌 경우에는 a + b 를 return해라
	return a + b;
}

 

- Overloading 실사용 예시 -> Next.js 사용시

Router.push({
	path: "/home",
	state: 1
});

.push("/home");

↓

type Config = {
	path: string,
	state: object,
}

type Push = {
	(path: string):void,
	(config: Config):void,
}

const push:Push = (config) => {
	if(typeof config === "string"){
    	console.log(config);
    } else {
    	console.log(config.path, config.state);
    }
}

 

다른 call sign에 파라미터 개수까지 다른 경우 optional parameter 작성하여 if문 처리.

// 다른 call sign에 파라미터의 개수도 다른 경우
type Add = {
	(a:number, b:number):number,
	(a:number, b:number, c:number):number
}

// optional parameter
const add:Add = (a, b, c?:number) => {
	if(c){
    	return a + b + c;
    }
	return a + b;
}

add(1, 2); // 가능
add(1, 2, 3); // 가능