[TypeScript] Generic 이란?

1.정의

Generic : TypeScript의 기능으로 함수, 클래스 ,인터페이스 등을 작성할 때 타입을 파리미터화 할 수 있는 기능 

즉, 파라미터로 타입을 입력 가능하다.

2.예시

//예시 1. array type을 확인하면 unknown타입으로 지정된 것을 확인 가능
function example(x: unknown[]) {
  return x[0];
}

let array = example([4,2])
console.log(array)

//예시 1. 오류 발생 예제 
console.log(a + 1) 
//array는 사람이 보기에는 분명 숫자가 맞지만 타입은 unknown이기에 연산에 에러가 발생한다.

 

• 위 예제를 보면 입력되는 array의 Type은 unknown으로 지정되있는 것을 확인할 수 있다.
• 즉, 타입스크립트는 타입을 알아서 변경해주지 않기 때문이다. 
• 이런 특징을 통해 다음과 같은 에러가 발생할 수 도 있다.

이러한 문제를 해결하는 방법은 두 가지 있다.

1. narrowing 하기
2. Generic 문법으로 타입을 파라미터로 함수에 입력하기

//예시2. Generic 적용 함수
function Generic<GenType>(x : GenType[]) : GenType {
    return x[0] // x : number | string이 되기도함 
}

let caseA = Generic<number>([4,2])
//확장성도 좋음 string으로 변경도 가능
let caseB = Generic<string>(['3','3'])
console.log(a);

//예시.3  Generic 적용 Class
class GenClass<GenType> {
     value : GenType;

    constructor(value: GenType) {
        this.value = value;
    }

    getValue(): GenType {
        return this.value;
    }
}

//number로 타입이 지정됨 
let gen = new GenClass<number>(10);
console.log(gen.getValue()); // 출력: 10

• <GenType> 처럼 <> 안에 파라미터 처럼 타입 입력이 가능하다.
• 즉, 함수<number>() 작성하면 GenType에는 number 타입이 들어가게 된다.

//number로 지정했는데도 오류 발생 
function Generic<GenType>(x: GenType) {
  return x - 1
}

let array = Generic<number>(100)

//string으로 지정했는데도 오류 발생 
function Generic<GenType>(x: GenType) {
  return x.length
}

let a = Generic<string>('hello')

• 위 코드 처럼 -1을 시도하거나 문자열의 길이를 읽기 위해 length함수를 사용하는데 오류가 발생한다.
• 이유는 GenType에 number/string 이외의 타입이 들어올 수 있으니 미리 사전에 방지하기 위해 오류가 발생하게 된다. 
• 이런 경우 narrowing을 하거나 미리 Generic에 올 수 있는 타입을 미리 제한하여 해결할 수 있다.

Generic 타입 제한(constraints)

• extends 문법을 사용하면 타입을 제한할 수 있다.
• interface에 사용되는 extends와 차이점은 interface에서는 데이터의 복사의 기능을 한다면 
• Generic은 GenType extends number와 같이 오른쪽에 오는 속성을 가지고 있는지 체크하는 방식이다.

//예시1. extends number로 타입을 제한하여 해결한다.( x(숫자) - 숫자 )
function Generic<GenType extends number>(x : GenType) {
  return x - 1;
}


//예시2. 커스텀 타입도 extends 가능하다.
interface LengthCheck {
  length : number;
}

function Generic2<GenType extends LengthCheck>(x : GenType) {
  return x.length;
}

 

 

3.기타

장점

• Generic을 사용하면 잘못된 타입 사용을 방지할 수 있다. (컴파일 시점에서 타입체크 가능)
• 동일한 로직을 여러 타입에 대해 재사용 가능