TypeScript/TypeScript - 기초부터 실전까지

14. 제네릭 | 기본 문법 | 기존타입 정의, 유니온 타입을 이용한 선언 방식의 문제점과 제네릭의 장점

DEV-Front 2023. 10. 8. 23:36
반응형

제네릭이란?

타입을 함수의 파라미터 처럼 받는게 제네릭이다

c#, java 등 재사용이 높은 컴포넌트를 만들때 자주 활용되는 특징이다.

한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.


제네릭의 기본 문법

function logText<T>(text : T) : T{
    console.log(text);
    return text;
};

// 함수 타입을 함수 호출과 함께 지정함
logText<number>(10);
logText<boolean>(true);
logText<string>('안녕');

기존 타입정의 방식과 제네릭의 차이점 - 함수 중복 선언의 단점

// 단순히 타입을 다르게 받기 위해 중복 함수를 만드는건 안좋은코드
function logText(text) {
    console.log(text);
    text.splice('').reverse().join('');
    return text;
};

function logNumber(num) {
    console.log(num);    
    return num;
};

logText('안녕');
const num = logNumber(10);

기존 문법과 제네릭의 차이점 - 유니온 타입을 이용한 선언 방식의 문제점

문자를 넣었음에도 변수 a에 받아온 타입이 여전히 string, number 이다. 

문자를 넣었음에도 split 함수를 사용할 수 없다.

정확히 string이라고 추론이 되어야만 split을 쓸 수 있다. 이런 문제가 있다.

인풋은 해결되었지만 반환값의 문제는 해결되지 않는다.


제네릭의 장점과 타입 추론에서의 이점

function logText<T>(text : T) : T {
    console.log(text);    
    return text;
};

const str = logText<string>('안녕');
str.split('');

const login = logText<boolean>(true);

제네릭은 이런식으로 인풋값, 반환값에 대한 타입 추론이 확실하다.

타입정의에 대한 이점을 제네릭이 확실히 제공해준다

반응형