typescript - call signature/generic

wj·2023년 6월 26일
0
  • call signature
    해당 함수의 arguments의 타입과 함수 반환 타입에 대해 알려줌
type Add = (a:number, b:number) => number
const add:Add = (a, b) => 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 signature가 여러개 있는 함수에서 발생
//자주 보게 될 오버로딩 예시 

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

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

const push: Push = (config) => {
    if(typeof config === "string") {console.log(config)}
    else {
        console.log(config.path)
    }
}
//파라미터의 갯수가 다를 경우 optional 설정
type Add = {
    (a:number, b:number):number,
    (a:number, b:number, c:number):number,
}

const add:Add = (a,b,c? : number) => {
    if(c) return a+b+c
    return a + b
}
  • generics(polymophism다형성)

    제네릭은 C#이나 Java와 같은 언어에서 재사용 가능한 컴포넌트를 만들기 위해 사용하는 기법입니다. 단일 타입이 아닌 다양한 타입에서 작동할 수 있는 컴포넌트를 생성할 수 있습니다.
    (구체적인 타입을 지정하지 않고 다양한 인수와 리턴 값에 대한 타입을 처리할 수 있다.)
    타입스크립트에서 제네릭을 통해 인터페이스, 함수 등의 재사용성을 높일 수 있습니다.

type SuperPrint={
<T>(arr:T[]):T;
}
//<T>(arr:T[]) => T

const superPrint:SuperPrint=(arr)=>{
return arr[0]
}

const a=superPrint([1,2,3])
const b=superPrint([true,false,true])
const c=superPrint(["a","b"])
const d=superPrint([1,2,"a","b",true])

any를 사용하게 되면 에러가 발생해도 확인할 수 없음

profile
tistory로 옮겼습니다

0개의 댓글