반응형
제네릭이란?
타입을 함수의 파라미터 처럼 받는게 제네릭이다
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);
제네릭은 이런식으로 인풋값, 반환값에 대한 타입 추론이 확실하다.
타입정의에 대한 이점을 제네릭이 확실히 제공해준다
반응형
'TypeScript > TypeScript - 기초부터 실전까지' 카테고리의 다른 글
16. 제네릭의 타입 제한방법 3가지 | keyof (0) | 2023.10.09 |
---|---|
15. 제네릭 실전 예제 - DropDown | 인터페이스에 제네릭을 선언하는 방법 (0) | 2023.10.08 |
13. 타입스크립트의 클래스 문법 (0) | 2023.10.08 |
12. 클래스 | 프로토타입 (0) | 2023.10.08 |
11. Enums - 특정 값들의 집합을 의미하는 자료형 (0) | 2023.10.08 |