Call Signatures
프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있다. Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정합니다.
Add 라는 Call Signatures를 생성해놓았기 때문에 add 함수의 인수와 반환값 타입이 number라고 지정하지 않아도 된다.
a + b를 괄호로 묶으면 오류
오류가 왜 나지?!
결론부터 말씀드리자면 {}를 사용하면 그 값이 반환값이 함수 내부의 내용으로 처리가 됩니다. 밑의 예시를 보면 이해가 되실거라 생각됩니다.
1. const add:Add = (a,b) => a+b 를 함수로 풀면 다음과 같게 됩니다.
function add(a, b) {return (a+b)}
2. const add:Add = (a,b) => {a+b} 를 함수로 풀면 다음과 같게 됩니다.
function add(a, b) {a+b;}
즉 애로우함수에서 {}를 사용하게 되면 그 안의 값은 반환이 아니라 함수 내부 내용으로 처리되기에 반환값이 없는 void로 처리됩니다. 이에 따라 위에서 미리 선언한 Add자료형의 반환값은 number라고정해놓은 내용과 충돌하기에 에러가 발생합니다.
오버로딩Overloading
서로 다른 여러 개의 Call Signatures를 가졌을 때 오버로딩이 발생한다.
예시를 보자.
Call Signatures인 Add를 이렇게(인수 b의 타입을 다르게) 바꿔 보았다. 그러자 타입스크립트에서 잘못됨을 바로 감지했다.
매개변수의 데이터 타입이 다른 경우 예외 처리
오버로딩은 이처럼 서로 다른 Call Signatures가 여러개 존재하는 함수이다.
이제 실제로 개발할 때 볼 수 있는 오버로딩을 보자. 오버로딩은 외부 라이브러리에서 많이 활용된다.
type add = {
(a:number, b:number):number
(a:number, b:number, c:number):number
}
const add:Add = (a, b, c?:number) => {
//c는 선택사항, 옵션 이라고 보면 된다.
if(c) return a + b + c
return a + b
}
add(1, 2)
add(1, 2, 3)
TypeScript
복사
다형성Polymorphism
제네릭을 이용해 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미한다.
polymorphism(다형성)
poly란?
- many, serveral, much, multi 등과 같은 뜻
morphos란?
- form, structure 등과 같은 뜻
polymorphos = poly + morphos = 여러 다른 구조
concrete type
- number, boolean, void 등 지금까지 배운 타입
generic type
- 타입의 placeholder제네릭을 사용해봅시다.
number 타입으로 사용하니 ⇒ number라고 추론한다.
boolean으로 사용하니 boolean이라고 추론하네 우와!
number, string, boolean 타입으로 섞어서 사용해도 모두 추론했어~!
위 코드를 보고 정리하면,
•
우리는 타입스크립트에게 타입을 유추할 수 있도록 알려주었다.
•
그 타입의 배열이 될 것이라는 것을 인지하고 그 타입 중 하나를 리턴하도록!! 했다.
•
어떤 타입이 오든 타입스크립트는 그것을 추론한다.
•
이것이 제네릭
이 상태에서 superPrint 타입 제네릭을 하나 더 추가하고 싶다고 해보자.
1.
제네릭을 사용할거라고 얘기해주고 이름을 작성해주자.
2.
어디서 제네릭을 사용할건지 얘기해주자. 지금은 제네릭이 함수의 두번째 인자를 사용할 거라고 얘기해 줄 것이다.
인자를 변경하고 두 개의 인자를 예상하고 있던 아이들이 오류가 났다.
그니까 다시 정리하면,
1.
제네릭은 이름만 정해주면 된다.
2.
T는 함수의 첫번째 파라미터로 배열이 올 거라고 말해준다.
3.
M은 두번째 파라미터로 들어온다고 말해준다.
4.
그 다음은 타입스크립트가 우리의 요구에 따라서 Call Signatures를 만들어준다. (any와의 차이점)
Challenge goals:
•
현재까지 배운 것을 토대로, 두 함수에 대한 구현과 함께 호출 시그니처(call signatures) 를 작성해주세요
•
last(arr): 이 함수는 배열의 마지막 요소를 반환해야 합니다.
•
prepend(arr, item): 이 함수는 배열의 시작 부분에 item을 넣고 return해야 합니다.
type Last = <T>(arr:T[]) => T;
const last:Last = (arr) => arr[arr.length-1];
type Prepend = <A, B>(a:A[], b:B) => Array<A|B>;
const prepend:Prepend = <A, B>(arr:A[], item:B) => {
return [item, ...arr]
}
TypeScript
복사
