[TS] TypeScript Alias Type,Call Signature,Generic

TypeScript를 공부하면서 새로운 개념들을 공부하다 보니 헷갈리는 부분이 생겨
먼저 용어들에 대한 정확한 의미를 기록하려고 한다.

Alias Type

의미

• alias의 뜻은 '별명'이다. 따라서 직역하면 type의 별명인 것이다.
• Alias Type은 새로운 type을 지정할 수 있는 개념이다.

사용법

• Alias Type은 뒤에서 기록할 interface와 유사한 사용법을 가진다.

//객체의 모양을 결정해줄 수 있다.
type People={
	name : string,
    	age ?: number
    }
    
//유니온 타입으로 타입 지정
type state='TODO'|'Doing'|'Done'

//튜플로 타입 지정
type Tuple=[string,number];

• 위처럼 interface처럼 객체의 모양을 설명해줄 수도 있다.
• 유니온 타입이나 튜플로 타입을 지정할 때는 interface보단 Alias Type을 사용하는 것이 유리하다.

 

 

Call Signature

의미

• Call signature은 placeholder 같은 느낌이라고 생각하면 된다.
• 함수에 커서를 올렸을 때 뜨는 파라미터, 리턴값의 타입 정보를 확인할 수 있다.

사용법

type Add=(a:number,b:number)=>number;

• 위처럼 Add라는 함수의 call signature을 작성해줄 수 있다.

보통 오픈소스를 사용하기 때문에 직접 call signature을 작성할 일은 드물지만,
call signature를 알면, 처음 사용하는 메서드도 쉽게 알 수 있다.

 

Generic

의미

• Generic은 타입을 함수의 파라미터처럼 사용할 수 있게 해 준다.
• 쉽게 말하면, 유동적인 타입 사용을 위한 임시 타입이라고 생각할 수 있다.

사용법

• 예를 들어 배열을 인자로 받고, 배열의 첫 번째 요소를 반환하는 함수의 call signature을 작성한다고 해보자.

type first={
	(arr : number[])=>number
	(arr : string[])=>string
    }

• 위처럼 해당 인자가 number일 때와 string일 때 따로 오버로딩으로 선언을 해줘야 할까?
• boolean, object 등 다양한 type으로 인자를 받고 싶다면?

이런 다형성을 보장하기 위해 Generic이 사용된다.

type first=<T>(arr : T[]):T

• 위처럼 call signature를 작성해주면, 위에 겪었던 문제를 해결할 수 있다.
  • <T> : T라는 generic을 사용할 것이라고 알려준다.
  • arr : T[] : arr 인자를 받는데 type은 T의 배열 형태이다.
  • T : T type을 반환한다.
• T가 number라면??

number type을 사용하는데 number 배열을 인자로 받고, number를 반환하는 함수

 

예시

• react에서 많이 사용되는 useState의 call signature를 분석해보자.

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

• <S> generic을 사용한다.
• 인자로 type이 S인 초깃값을 받거나 S를 반환하는 함수를 받는다.
• 배열을 반환한다.
  • 첫 번째 요소는 S type
  • 두 번째 요소는 Dispatch Type

    type Dispatch<A> = (value: A) => void;

 

Dispatch Type은 A generic을 사용하고, A type을 인자로 받아서 반환값이 없는 함수다.

   

   type SetStateAction<S> = S | ((prevState: S) => S);

 

SetStateAction은 S generic을 사용하고, S 이거나, S를 인자로 받아 S를 반환하는 함수이다.

 

const [count,setCount]=useState();

• 위와 같은 코드라고 했을 때
  • setCount는 위의 Dispatch type인 것이다.
  • setCount는 인자로 count와 같은 type 값을 받거나, 이전 상태를 인자로 받고 새로운 상태를 반환하는 함수를 반환하는 함수를 받는다.