Typescript Generic

hmds1606·2022년 6월 29일
0

Generic이란 타입을 일반화하는 것을 의미한다.

생성시점에서 타입을 명시하여 하나의 타입이 아닌 다양한 타입을 사용할 수 있도록 하는 방법을 말하며
Generic을 사용하지 않으면 불필요한 타입 변환이 되기 때문에 비효율적이다.

// 1.문자 타입
const getString = (arg: string): string => {
  return "영희"
}
const result1 = getString("철수");

// 2.숫자 타입
const getNumber = (arg: number): number => {
  return 123
}
const result2 = getNumber(123)

// 3.any 타입 //아무거나 사용가능
const getAny2 = (arg: any): any => {
  return arg + 2
}
const result3_1 = getAny2("철수")
const result3_2 = getAny2(8)
const result3_3 = getAny2(true)

// 4.any 타입2
const getAnys = (arg1: any, arg2: any, arg3: any): [any, any, any] => {
  return [arg3, arg2, arg1]
}
const result4 = getAnys("철수", true, 8)

// 5.generic 타입(들어온 타입을 그대로 사용하는 것)
function getGeneric<MyType>(arg: MyType): MyType {
  return arg
}
const aaa: string = "철수"
const bbb: number = 8
const ccc: boolean = true

const result5_1 = getGeneric(aaa)
const result5_2 = getGeneric(bbb)
const result5_3 = getGeneric(ccc)

// 6.generic 타입2
function getGenerics<MyType1,MyType2, MyType3> (arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
  return [arg3, arg2, arg1]
}
const result6 = getGenerics("철수", true, 8);

// 7.generic 타입 축약1
function getGenericsT<T1,T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
  return [arg3, arg2, arg1]
}
const result7 = getGenericsT("철수", true, 8)

// 8.generic 타입 축약2
function getGenericsTUV<T, U, V> (arg1: T, arg2: U, arg3: V): [V, U, T] {
  return [arg3, arg2, arg1]
}
const result8 = getGenericsTUV<string, boolean, number>("철수", true, 8)

// 9.useState에서의 generic
const [aaa, setAaa] = useState<string>(() => "철수")

// 10.화살표 함수에서의 generic
const getGenericsArrow = < T, U, V >(arg1: T, arg2: U, arg3: V): [V, U, T] => {
  return [arg3, arg2, arg1]
}
const result10 = getGenericsArrow<string, boolean, number>("철수", true, 8)

1~6번의 예시는 일반적인 타입을 지정해주었다면 7번 부터 generic타입 축약이 들어가면서
기본형으로 T를 사용하며
2개 이상의 generic타입을 쓸 경우에는 U, V를 추가적으로 사용한다.

profile
= ["프론트엔드", "개발자"]

0개의 댓글