3.0 Call signiture
지금까지 object의 type을 미리 지정해두고, 이 type을 따르도록 새로운 변수를 선언할 때 마다 type을 언급하는 코드를 확인해보았다
이제부터는 아까보다 더 간단한 방법으로 함수 구성요소들의 type을 결정하는 방법에 대해 알아보고, call signiture라는 새로운 개념에 대해 정의하고자 한다.
1) declare
type Add=(a: number, b: number)=> number
함수의 type을 미리 지정하고 싶다면, 우린 parameter, return값의 자료형을 미리 지정해둘 수 있다. 앞단원에서 배웠던 부분에서도 이런 내용이 있었다. 앞에서의 내용은 ‘하나의 함수를 선언’하는 경우에 해당하는 이야기고, 지금은 아까보다 간단히 type을 선언하고, 무한 재사용할 수 있는 형태로 선언하고자 한다.
2) Call
const add : Add =(a,b)=>a+b
const add: add 라는 함수: Add: 앞서 선언했던 Add라는 type의 call signiture를 사용할 것임.⇒a+b: 함수의 내부에서 계산을 해서 → 이를 return 값으로 반환한다.
사실상 구현하는 부분은 동일하고, : Add라고 적으며, 함수의 형식을 미리 지정해두는 부분만 다르다.
3) Sum
- type으로 함수의 call signiture을 선언할 수 있다.
- call 할 때 어떻게 type을 끌고 오는가
- 함수의 구현은 어떻게 작성할 것인가
3.1 Overloading
지금까지는 하나의 call signiture로 함수의 형식을 지정하는 방법을 배웠다.
이제부터는 overloading 즉, 함수의 형식이 여러 개인 경우 코드를 작성하는 법을 배워보고자 한다.
기본적인 문법을 확인한 이후, 각각의 특이한 상황에서 어떻게 대처하는지를 중심으로 확인하는 것이 좋을 듯하다.
1) Definition
overloading의 정의는 그냥 call signiture가 여러 개인 상황을 의미한다.
(1) 객체로 함수의 형식 선언하기
type Add=(a:number, b:number)=>number;
type Add={
(a:number, b:number):number
}
위에서 배웠던 call signiture는 객체 안의 멤버처럼 작성할 수도 있다.
(2) 여러 개의 call signiture를 적어보기
type Add={
(a:number, b:number):number,
(a:number, b:string):number
}
이 코드의 의미는, Add라는 함수를 상속받아 선언된 함수는 → parameter를 두 개를 갖는데, 두 번째 parameter의 자료형은 string일 수도, number일 수도 있다.
(3) call + 주의사항
const add :Add=(a,b)=>a+b
이 코드는 조건부로 성립하기 때문에 오류가 있다고 뜰 것이다
b가 number인 경우 괜찮지만,
b가 string인 경우 계산이 불가능하다.
따라서 이 경우 함수를 선언할 때 b에 조건을 걸어주어야 한다.
const add :Add=(a,b)=>{
if(typeof b==='number')
return a+b;
else if(typeof b==='string')
return a;
}
typescript의 목적이 무엇이었는가? 변수가 할당받은 type의 특성에 따라서만 움직이도록 하기 위함이었다. 따라서, type이 여러 개 적혀있는 경우 아무 계산이나 모두 허용해줄 것이 아니라, 조건에 맞추어 계산을 허용해주어야 하는 것이다.
생각해보면 당연하게 발생할 문제점과 해결책이다.
2) Custom types in call signiture
우리가 기본적으로 알고 있는 type은 number, string, boolean 등이다. 지금까지는 이런 기본 type만 call signiture에 포함될 수 있도록 코드를 작성했다.
그러나, 기본적인 type이 아니라 내가 만들어둔 객체나 함수타입도 call signiture안에 포함할 수 있을까?
type Person={
name: string,
age?: number
}
type Add ={
(a:number, b:number):Person,
(a:number, b:number):number
}
- Person : Person이라는 객체 type을 선언해둔 이후에 → 이를 return 값의 형식으로써 선언해둘 수 있다.
3) parameter의 개수가 다른 경우
type Person={
(a:number, b:number):number,
(a:number, b:number, c:number):number;
}
parameter의 개수가 다른 경우, 함수를 선언할 때 parameter를 2,또는 3개를 적으면 오류가 난다.
그런데 c변수에만 조금 더 집중해보자. Person이라는 overloading은 c가 있을 수도, 없을 수도 있다는 것이다. 즉 c의 존재여부는 ‘optional’하다는 뜻이다.
아까 optional과 관련된 코드를 배웠다
type Add={
a:number,
b?:number
}
따라서 이를 함수를 선언하는 상황에서 사용해주면 된다
type Add={
(a:number, b:number):number,
(a:number, b:number, c:number):number;
}
const add :Add=(a,b,c?){
if(c)
return a+b+c;
else
return a+b;
}
Add : overloading을 보면 → c의 존재 여부가 선택적(=optional)이라는 것을 알 수 있다
c?: c의 존재 여부가 선택적이므로, c?와 같이 표현한다.
if…else… : c의 존재 여부에 따라 코드를 달리 한다.
(뭔가 ‘고정되지 않은’것이 있으면 항상 조건문을 걸어 확인을 하고 코드를 쓰는 듯)(unknown, optional 등..)
<복습할 사항>
'프로그래밍 > Typescript' 카테고리의 다른 글
| TypeError: prevState.boardId is not iterable (0) | 2025.03.20 |
|---|---|
| #4-2 Interfaces (0) | 2025.01.20 |
| #4-1 Classes and Interfaces - Class (2) | 2025.01.20 |
| #2. Overview of the Typescript (1) | 2025.01.14 |
| Intro (0) | 2025.01.14 |