제네릭(generic)

1. 제네릭이란?

다양한 타입을 재사용할 수 있게 하는 것. 타입 파라미터만 적어주고 생성하는 시점에서 사용하는 타입을 결정함.

2. 사용법

가. 기본사용법

타입이 늘어날 때마다 계속 써주거나 오버로드를 사용해줘야됨.

function getSize<T>(arr:T[]): number {
    return arr.length
}

const arr1 = [1,2,3]
getSize<number>(arr1)

const arr2 = ["a","b","c"]
getSize<string>(arr2)

const arr3 =[false, true, true]
getSize<boolean>(arr3)

const arr4 = [{}, {},{name:"Tim"}]
getSize<object>(arr4)

타입파라미터 T를 <>로 입력후 arr:T[]로 배열임을 알려준다.
이후 사용하고자 하는 곳에서 <>를 이용해서 타입을 지정해주면 된다.

물론 자동으로 추론으로 되기도 함

나. interface에서 사용법

타입 파라미터를 이용해서 타입 변수를 지정한 뒤에 사용하면 됨

interface Mobile<T>{
    name : string
    price : number
    option : T
}

const m1: Mobile<{color : string, coupon:boolean}> = {
    name: "s21",
    price: 1000,
    option: {
        color: "red",
        coupon: false
    }
}
const m2: Mobile<string> = {
    name: "s21",
    price: 1000,
    option: "good"
}

m1처럼 Mobile옆에 객체를 풀어서 지정해도 되고 m2처럼 바로 사용해도 된다.

다. interface 확장

이 코드를 보면

각각의 user, car, book이라는 변수는 showName의 파라미터로 들어가서 name을 반환한다.

하지만 book의 경우에는 name이라는 property가 없어서 사용하면 안됨

타입 파라미터를 사용하면

data의 모든 변수에 name이 있다고 장담할 수가 없기 때문에 에러가 발생한다.

이를 제어하기 위해서는 extends확장형을 사용하면 된다.

이는 T라는 어떤 타입이 올 것인데 그 T는 name이 string인 객체가 확장되서(extends) 올 것이다라는 것을 알려준다.

그렇기 때문에 마지막 showName(book)에는 name이라는 property가 없기 때문에 에러가 발생한다.