TypeScript: 제네릭

양성진·2022년 11월 1일
0

TypeScript

목록 보기
8/9

제로베이스를 통해서 공부하고 정리하는 내용입니다

GENERIC

클래스 함수 등에서 사용할 타입을 클래스나 함수를 사용할때 결정하는 기법

함수에서 파라미터를 받듯이 타입을 받는것

유연하지만 안정적인 개발이 가능하고 재사용성이 용이한 기법입니다.


 let foo: Array<number> = [1,2,3] 
    // 넘버타입의 요소들이 들어가는 어레이이다.

function returnInput (input:number|string){
    return input
}

function returnInputs<T> (input:T){
    return input
}

returnInput 같이 매개변수의 타입을 지정해서 리턴해줄수 있지만 이것을 일일이 지정하는거도 일이다.

<T> 안에 T는 타입을 지정하는데 

let foo = returnInput<number>(123)

이런 식으로 타입을 지정후 알맞은 타입의 파라미터를 넣어주면 되는거다.
interface GenericItems<T>{
    item:T[];
}

function genericFunction(arg:GenericItems<number>){
    console.log(arg.item.length)
}

문제점

T는 any처럼 다루고 사용한다.
이렇게 되면 매개변수의 타입을 정확히 무슨값을 반환하는지 유추하기가 어렵습니다. 그래서 안에 any로 명시하는 것보다 정확하게 무슨 타입으로 줄것인가 명시해주는것이 유지보수 측면에서도 좋습니다.

또 이러한 점을 해결함에 있어서 제네릭 제약 조건 만들어 사용합니다.

제네릭제약조건

특정타입들에만 동작하는 제네릭 만드는 법
타입 변수가 캡쳐하는 타입이 어떤 타입인지 힌트를 준다.
extends를 활용

interface WithName{
    name:string;
}
// 제네릭 제약조건의 기본 타입
function logName<T extends WithName>(input:T){
    console.log(input.name);
}

//타입 매개변수 활용
// keyof: 어떤 타입에서 T에 해당하는 유니온 타입을 뽑아오는 연산자.
// 객체타입에 정의가 되어있을텐데 T에 해당하는 오브젝트 값에 K가 해당하지 않을수도 있어서 에러가 뜬다.
function logPropertyValue<T,K extends keyof T>(obj:T,key:K){
    console.log(obj[key]);
}

const foo2 = {a:1,b:2}

logPropertyValue(foo2,"b")
profile
프론트엔드 개발자를 꿈꾸는 돼지

0개의 댓글