TypeScript 제너릭

제너릭이란 타입을 유동적으로 받아 처리할 수 있는 문법을 말합니다.

 

아래와 같이 파라미터로 받은 타입이 다른 두 값을 튜플형태로 반환해야합니다.

 

function returnFunc(a:number,b:string): [number,string] {
    return [a,b];
}

const a: number = 1;
const b: string = "2";
console.log(returnFunc(a,b)); // [ 1, '2' ]

returnFunc의 파라미터에 타입을 둘 다 주었고, 함수자체에도 튜플로 타입을 주었습니다.

 

이제 이 함수는 a에는 number,b에는 string 타입의 값밖에 주지 못합니다.

물론 상관없으면 상관없는데

상관이있으면 고쳐야겠죠

 

위 파라미터,함수들의 타입을 유동적으로 정할 수 있는 방법은 제너릭을 사용하는 것

//함수선언식

function returnFunc<T1,T2>(a:T1,b:T2): [T1,T2] {
    return [a,b];
}
    
const a: number = 1;
const b: string = "2";
console.log(returnFunc(a,b)); // [ 1, '2' ]

// 함수표현식

const returnFunc = <T1,T2>(a:T1,b:T2): [T1,T2] => {
    return [a,b];
}
    
const a: number = 1;
const b: string = "2";
console.log(returnFunc(a,b)); // [ 1, '2' ]

 

이제 returnFunc함수는 받아들어오는 파라미터의 타입에 따라 유동적으로 타입이 설정됩니다.

 

그냥 any를 써도 되지 않냐 하지만.

제너릭으로 작성했다 하면

무슨 타입이 들어오든 유동적으로 실행성공하겠다를 알린셈이고,

any를 썼을때 작성되는 a+b와 같은 코드가 제너릭에서는 사용이 안될것

ex) "5" + 5 >> error

 

 

===========================================

 

- 제너릭을 사용하지 않고 unknown타입으로 바꾸어도 똑같이 사용되지 않을까? 생각이 들어 추가 작성해봄

 

const returnFunc = (a:unknown,b:unknown): [unknown,unknown] => {
    a='3';
    console.log(typeof(a)) // string
    return [a,b];
}
    
const a: number = 1;
const b: string = "2";
console.log(returnFunc(a,b)); //[ "3", '2' ]

원래는 numtype인 a 값이 unknown으로 설정되어 있어 

a='3' << 처럼 타입변경이 허용되어버린다.

 

안정성 면에서 generic이 더 좋은듯

 

==========================================

 

 - 인터페이스 에서도 제너릭을 사용 가능하다.

 

interface Foods<T> {
    tasteScore: T;
    type: string
}

const soju =  {
    tasteScore: 10,
    type: 'fastFood'
}

const beer =  {
    tasteScore: '10점',
    type: 'fastFood'
}