[TypeScript] Generic

function func(x :unknown[]) {
    return x[0];
}

let a = func([4,2]);
console.log(a);

a를 출력하면 4가 출력될 것이다. 그렇다면 a의 타입은 뭘까? 

a의 타입은 number 타입이 아닌, unknown 타입이다. 파라미터의 타입이 unknown[] 이기 때문에 unknown 타입이 된다. 

 

function func(x :unknown[]) {
    return x[0];
}

let a = func([4,2]);
console.log(a + 1);

또한 이렇게 연산할 경우에도 에러가 난다. 

즉, 함수의 return 타입 지정을 number로 지정하기 전까지는 number타입으로 변하지 않는다. 

 

그런데, 타입스크립트를 사용하면 파라미터로 타입을 입력할 수 있는 Generic을 사용할 수 있다. 

 

Generic

function func<MyType>(x: MyType[]) :MyType {
    return x[0];
}

let a = func<number>([4,2])
let b = func<string>(['kim', 'park'])

함수에 <> 괄호를 열어 파라미터를 입력할 수 있다. 

예시의 func<number>() 이렇게 사용할 경우 MyType에는 number가 들어간다. 

즉, func(x: number[]) :number {} 랑 똑같이 동작한다고 보면 된다. 

 

Generic을 사용하면 원하는 타입을 return 값으로 받을 수 있는 함수를 쉽게 제작이 가능하다. 

 

function func<MyType>(x: MyType[]) :MyType {
    return x[0];
}

let a = func([4,2])
let b = func(['kim', 'park'])

함수를 사용할 경우 <>를 굳이 사용하지 않아도 어느 정도 기본 타입을 유추해서 넣어주기도 한다. 

 

-1의 오류 

Generic을 사용하더라도 return x - 1 같은 연산을 사용할 경우 에러가 난다. 

MyType이 number라면 문제가 없겠지만, number 외엔 다른 타입을 넣을 경우에 에러가 발생하기 때문이다. 

 

이럴 경우에는 narrowing을 사용하거나, Generic에 넣을 타입 자체를 제한하는 방법이 있다. 

 

Generic 타입 제한하기 

extends 문법을 사용하면 타입을 제한할 수 있다. 

function func<MyType extends number>(x: MyType) {
  return x - 1
}

let a = func<number>(100)

MyType extends number라고 사용하면 타입 파라미터에 넣을 수 있는 타입을 제한할 수 있습니다.