본문 바로가기
TypeScript

[TypeScript]Call Signature, Generic Type

by hans-j 2023. 3. 10.

https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures

 

Documentation - More on Functions

Learn about how Functions work in TypeScript.

www.typescriptlang.org

호출 시그니쳐!!

함수를 정의하는 방식 중 하나로, 함수의 매개변수와 반환값의 타입을 명시하는 방법

function add(x: number, y: number): number {
  return x + y;
}

이 함수의 Call Signature는 (x: number, y: number) => number

이는 함수가 받는 매개변수가 number 타입이고, 함수가 반환하는 값도 number 타입을 나타냄


 

Concerete type :

 

구체적으로 어떤 값을 담고 있는지 명확하게 알 수 있는 타입을 의미.

예를 들어, number, string, boolean, void와 같은 타입이 구체적 타입의 예시.

 


Generic type : 

 

여러 다른 타입을 대신할 수 있는 타입.

제네릭 타입은 타입 매개변수를 사용하여 정의됨.

다양한 타입을 처리해야 하는 상황에서 매우 유용.

 

제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여

하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법 // 노마드 코더 TS강의 댓글에 학우분께서 남겨주신 멋진 설명

 

any와 다른점은?


제네릭을 사용할 때, 타입스크립트가 해당함수의 call signature(호출 시그니쳐)를 만들어주기때문에

어떤 자료형을 받을지 여전히 알려주지만 any를 쓰면 어떤 자료형이던 다 할당할 수 있다.

any 타입은 TypeScript의 타입 검사를 우회하는 방법 중 하나임.

function find<T>(array: T[], target: T): number {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === target) {
      return i;
    }
  }
  return -1;
}

검색하려는 원소를 받아 해당 원소가 배열 안에 존재하는지 확인하는 역할.

이 함수의 타입은 아래와 같이 제네릭 타입으로 정의할 수 있다.

위와 같은 경우에 굉장히 유용!


Concrete Type(구체적 타입)과 Generic Type(제네릭 타입)은

TypeScript에서 다형성(Polymorphism)을 구현하는 데에 중요한 역할을 함.

 

다형성은 동일한 인터페이스를 가진 객체가 다양한 타입으로 구현될 수 있음을 의미한당.

 


그래서 제네릭을 어떻게 쓰냐고??

 

자... 

function identity<T>(arg: T): T {
  return arg;
}

타입스크립트는 제네릭을 처음 인식했을 때와 제네릭의 순서를 기반으로 제네릭의 타입을 알게된다.

그냥 명시만 해주면 됨. 그럼 알아서 인식한다.

 

두 개의 제네릭 타입 매개변수 T와 U를 사용하는 함수를 구현해보자

 

function combine<T, U>(a: T, b: U): [T, U] {
  return [a, b];
}

위 함수는 타입 매개변수 T와 U를 사용하여 두 개의 값을 하나의 튜플로 묶는 역할을 함.

( 튜플 : 고정된 개수의 요소를 포함하는 배열)

 

이때, a와 b의 타입이 각각 T와 U로 지정된다.

 


결론 :

데이터를 많이 받아와야하는데 그 중에 타입이 가변성 있는 데이터다?

그럼 제네릭을 쓰자!


노마드코더 타입스크립트 강의를 듣고 작성하는 글입니다.