(vue3의 computed의 콜시그니쳐)
1.콜시그니쳐
vscode등에서 함수 위에 커서를 올리면 나오는 파라미터와 리턴 타입 정보를 말한다
type Add = (a: number, b: number) => number // 콜시그니쳐 정의
const add: Add = (a,b) => a+b // 함수정의(함수내용정의)
const result:number = add(1,2) // 함수호출(반환형의 타입정의까지)2.오버로딩
매개 변수만 다른 여러 함수타입을 정의하는것
type Add = {
(a: number, b: number): number;
(a: number, b: string): number;
};
const add: Add = (a, b) => {
if (typeof b === "string") return a;
return a + b;
};3.제네릭과 타입추론
아래의 예제에서 타입추론을 확인가능하다
실제로 외부라이브러리에서 많이 쓰이는 패턴
// 1.콜시그니쳐 작성
type SuperPrint = {
<T>(arr: T[]):T
<T>(arr: T[],arr1: M[]):T
// 0.함수오버로딩부분
// 위의 두 오버로딩의 참조해서 아래의 함수를 호출할수있는 함수타입 제공
// SuperPrint(T)
// SuperPrint(T,M)
}
// 2. 함수 선언 (함수 내용 작성)
// 오버로딩된 함수에 매개변수가 많을 경우 optional처리 (?)를 해주어야 에러가 안난다
const superPrint: SuperPrint = <T, M>(arr: T[], arr1?: M[]): T => arr[0]
// 3,함수호출
const i = superPrint([1, 2, 3, 4]) // *** 매개변수에 V에 해당하는 number의 배열을 넣으면 제네릭 T를 타입추론해서 반환형도 T라는걸 알수있다
const j = superPrint([true, false, true])
const k = superPrint(["a", "b", "c"])
const l = superPrint([1, 2, true, false, "hello"])4-1. 실제 사용 사례
*주의 할점이 콜시그니쳐의 오버로딩의 형식이 인터페이스이다
1.실제로 vue3의 computed를 사용시 computed까지 적으면 위와같은 콜시그니쳐가 표시된다
2.computed에 오버로딩된 함수가 정의되어있다
3.그러면 computed() 가 된다는건 일단 알수있으므로 입력한다
4.computed()가 입력되고 마우스 커서를 올리면 실제로 아래와 같이 사용된다고 함수상세내용이 표시되므로 참조해서 사용하면된다
5. 자주 헷갈리는것
type computed = {} 처럼 = 를 사용하면 콜시그니쳐 선언
const computed : {} 처럼 : 를 사용하면 콜시그니쳐 타입을 사용해서 함수선언
그러므로 위의 예제라면 computed()로 사용된다
4-2. 실제 사용 사례
실제로 useState도 위와같은 콜시그니쳐다
그러므로 아래와 같은 두가지 패턴을 사용가능하다
useStat(key,init)
useStat(init)
4-3 실제사용사례에 대한 추가 설명
앞선 사례들을 설명은 type으로 콜시그니쳐의 오버로딩을 정의했지만
실제로 사용한 예제는 아래처럼 인터페이스의 형태의 콜시그니쳐를 사용함을 알수있다
interface NormalCS {
(arg1: string, arg2: number): number;
}
//일반 함수
const InterfaceFunction: NormalCS = function (arg1, arg2) {return arg2;};
//화살표 함수
const InterfaceArrow: NormalCS = (arg1, arg2) => arg2;// Computed를 예로 들면 아래와 같을까
interface Computed {
(arg1: string, arg2: number): number;
}
const computed: Computed = (arg1, arg2) => arg2;5. Index Signature
인덱스 시그니쳐는 속성에 타입을 선언하는 구문과 유사하지만 한 가지 차이점이 존재한다. 속성 이름 대신 대괄호 안에 key타입을 작성하는 것이다.
key와 value의 타입이 string인 경우
type userType = {
[key : string] : string
}
let user : userType = {
'마이콜':'사람'
'또치':'타조'
}key의 타입은 string, value는 string, number, boolean
type userType = {
[key: string]: string | number | boolean;
}
let user : userType = {
'이름' : '또치'
'나이' : 38
'여자' : true
}참조