타입 정의 방식과 제네릭의 차이점

1. 타입 정의 방식

function logText(text: string) {
	console.log(text);
	return text;
}

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

logText('a');
logNumber(20);

• 기존 타입 정의 방식은 파라미터에 타입을 정의하면 다른 타입을 받지 못함
• 다른 타입을 받기 위해서는 동일한 로직의 함수를 여러개 작성해야 함
• 코드의 유지보수 관점에서 좋지 않고, 단순히 타입을 다르게 받기 위해 중복코드를 계속 생산해야 함
  
  

function logText(text: string | number) {
	console.log(text);
	return text;
}

const a = logText('a'); // const a: string | number
a.split('') // 에러발생
logText(20);

• 위를 해결하기 위해 유니언 타입 사용
• 하나의 함수에서 여러가지 타입을 받을 수 있음
• 전달인자의 문제는 해결되지만, 함수내에서 공통으로 접근할 수 있는 속성이나 api에 대해서만 프리뷰 제공
• 반환 값도 여전히 유니언 타입이고, 전달인자의 타입에 해당하는 api를 진행하지 못함
  
  

2. 제네릭

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

const a = logText<string>('a');
a.split('');

const login = logText<boolean>(true);

• 함수를 정의할 때 받을 타입을 파라미터의 타입과 리턴값의 타입으로 사용한다고 정의하는 것
• 함수를 호출할 때 해당 타입으로 받아서 사용한다고 정의
• 전달인자와 반환값이 해당 타입이 될 것이라는 것을 제네릭을 이용해서 선언
• 타입이 틀어지지 않게 구성이 가능하고, 해당하는 메서드 사용 가능
• 타입에 대한 함수를 각각 선언하는 것이 아니라, 실제로 함수를 정의할 때 타입을 비워놓은 상태에서 그 타입에 어떤 타입이 들어갈 지 호출하는 시점에 정의하는 것
• 그 타입을 추론을 해서 최종 반환 값에서도 사용 가능
  
  

interface Dropdown<T> {
	value: T;
	selected: boolean;
}

const obj1: Dropdown<number> = { value: 1, selected: false };
const obj2: Dropdown<string> = { value: 'a', selected: false };

• 인터페이스에 제네릭 적용 가능
• 인터페이스의 특정 속성에 대한 타입을 제네릭을 이용해서 선언 가능
• 제네릭을 사용해서 특정 속성에 대한 타입을 변경하는 것 가능함
  
  

참고 : 타입스크립트 입문 - 기초부터 실전까지