본문 바로가기
front-end/TypeScript

[TS]05 다형성 / 제네릭

by -제이리 2022. 5. 11.
728x90
320x100

 다형성 Polymorphism 이란?

'여러 모양'을 의미하는 그리스 단어이고 다형성에서 형은 타입(type)을 의미한다.

프로그래밍 언어에서 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미한다.

 

 

generic이란?

- 타입의 placeholder같은것이다. *concrete type대신 쓸 수 있다.
(*concrete type이란? : number, boolean, string, unknown, void 등 을 일컬음)
- 타입스크립트로 placeholder를 작성할 수 있고 그게 뭔지 추론해서 함수를 사용하는것.
- call signature를 작성할때 들어갈 확실한 타입을 모를 때 제네릭을 사용한다.
- 보통은 다른 라이브러리 또는 패키지를 사용하기때문에 직접 제네릭을 작성할 일은 드물다
 

 

배열의 call signature가 여러개 있다면?

-> 이럴땐 제네릭을 사용해서 간략하게 표기할 수 있다.


//제네릭 사용전 (3개의 콜시그니쳐가 쓰인것을 볼수 있다.)
type SuperPrint  = {
   (arr: number[]):void
   (arr: boolean[]):void
   (arr: string[]):void
 }
//제네릭 사용 후 (더욱 간단하게 코드작성을 할 수 있다.)
type SuperPrint  = {
 <T> (a: T[]) => void //앞에 꺽쇠<>를 열고 안에 제네릭 이름을 써준다.
}

 

type SuperPrint = <T, M> (a: T[], b:M) => T // 여러개의 제네릭을 만들 수 있음.

const superPrint:SuperPrint = (a) => a[0]

const a = superPrint([1, 2, 3],'hello')  // -> 제네릭을 사용하면 타입을 유추하고 마우스를 올리면 number로 유추한 타입으로 콜시그니처를 보여주는것을 알수 있다.
const b = superPrint([true, false],0) //마찬가지로 string타입으로 유추해서 보여줌
const c = superPrint(['one', 'two'],0)
const d = superPrint(['one', 1 , true],0)

// any를 쓰지 않는이유: 
d.toUpperCase() // (string에서만 쓸 수 있는 함수.)
// any를 사용하면 위 함수의 오류를 찾지 못한다. (타입스크립트의 보호를 받지 못함.)

//다른방식으로 제네릭 만들기

function superPrint<T>(a: T[]){
  return a[0]
}
const a = superPrint<number>([1, 2, 3]) // <number>을 써서 타입을 직접 명시해도 되나 굳이 쓸 필요없이 타입스크립트가 알아서 유추하는 방법이 낫다.

//--------------------------------------------------------------

//제네릭을 사용해서 타입을 생성할 수도 있고 어떤 경우는 타입을 확장할 수 있다. 또 어떤 경우는 코드를 저장하기도 한다.
type Player<E> = {
  name: string,
  extraInfo: E //extraInfo에 어떤함수가 들어올지 모르기댸문에 제네릭을 써준다.
}

type TomExtra = {
  favFood:string
}

type TomPlayer = Player<TomExtra>

// ↑이런식으로 타입의 확장이 가능하다.

const tom: Player<{favFood:string}> = {
  name:'Tom',
  extraInfo:{
    favFood:'tomato'
  }
}
const jay : Player<null> = { //-> 이런식으로 제네릭을 재사용할 수 있다.
  name:'Jay',
  extraInfo: null
}
728x90
320x100

'front-end > TypeScript' 카테고리의 다른 글

[TS]07 type과 interface  (0) 2022.05.16
[TS]06 클래스 / 추상클래스  (0) 2022.05.12
[TS]04 call Signatures / overloading(오버로딩)  (0) 2022.05.10
[TS]03 unKnown / void / never  (0) 2022.05.10
[TS]02 readonly / Tuple / any 타입  (0) 2022.05.10

댓글