[typescript] typescript의 generic 일반적인 사용법

 

우리는 사람들이 만든 모듈이나 라이브러리에 generic을 사용하는 것들을 정말 많이 볼 수 있다

예를 들어 react의 useState를 보면은

 

const [data, setData] = useState<number[]>()

 

이런식으로 useState를 사용해왔을 것이다.

그러면 <> 여기에 type을 지정해주는 것은 저 data가 어떤 type인지 지정해주는 것이다.

왜 저렇게 적을까?

그건 바로 저 useState를 만들때 generic을 사용했기 때문이다.

generic은 저번에 말했듯이 여러가지 type을 받을 때 사용 하는 것으로

한번 예시로 generic을 가지는 type을 만들어보자

 

export type player<E, T> = {
  name: string;
  extraInfo: E;
  age: T;
};

이런식으로 generic을 가지는 type을 만들 었고
이것을 이제 신규철이라는 player에 적용해보자

const shin:player<{favFood:string}, number> = {
	name: "Shin",
	extraInfo: {
		favFood: "gimchi"
	},
	age: 17
}

이런식으로 player라고 type을 적는 곳에 <>이 괄호를 열어서
각각의 generic에 대한 type을 지정 해주어야 한다.
다른 방식으로 적을 수도 있다.
아래코드는 위와 같다.

첫번째 예시)
type shinExtra = {
	favFood: string
}

const shin:player<shinExtra, number> = {
	name: "Shin",
	extraInfo: {
		favFood: "gimchi"
	},
	age: 17
}


두번쨰 예시 )
type shinPlayer = player<{favFood:string}, number>

const shin:shinPlayer = {
	name: "Shin",
	extraInfo: {
		favFood: "gimchi"
	},
	age: 17
}

세번째 예시 )
type extraShin = {
  favFood: string;
};

type shinPlayer = player<extraShin, number>;

const shin: shinPlayer = {
  name: "Shin",
  extraInfo: {
    favFood: "gimchi",
  },
  age: 17,
};

여기 있는 것들은 모두 같은 것들이고

이런식으로 generic에 type을 지정해주어야 하는 것이다.

그러므로 useState를 사용할때 generic으로 지정된 타입에 <>이거를 열고

type을 이때까지 지정해준것이다.