7. 유연하게 타입을 지정하려면 제네릭!

7.1 제네릭이란?

7.1.1 제네릭 소개

7.1.1.1 제네릭 정의

7.1.1.2 제네릭 기본

• 함수 선언에서의 사용

//파라미터와 반환값의 타입을 지정
function lion <T> (x: T): T {
	return x
}

• 클래스 선언에서의 사용

class Lion <T> {
	name : string;
	age : number;
	property : T;
}

• 인터페이스 선언에서의 사용

interface Lion <T>{
	name : string;
	age : number;
	property : T;
}

• 정리

// 선언할 때 이름 뒤에 제네릭이 온다고 생각하면 된다.

function example <T> () {}
class Example <T> () {}
interface Example <T> {}
type Example <T> = {};
const example = <T> () => {};

7.1.2 제네릭을 사용하는 이유

• 제네릭을 사용하지 않았을 경우, 모든 함수의 타입을 미리 지정해주어야 한다.

function exampleNumber(output : number) : number {
	return output;
}
function exampleString(output : string) : string {
	return output;
}
.
.
.

• 제네릭을 활용하여 변수처럼 취급

function exampleGeneric <T> (output : T ) : T {
	return output;
}

• any를 사용한 경우

function exampleAny(output : any) : any {
	return output;
}

• 예시1

// 잘못된 함수
function sum(a : string | number, b : string | number) : string | number {
	return a + b
}

// 기댓값
sum(20, 30); // 50
sum ('20', '30'); // '2030'

• 예시2

sum('20', 30); // '2030'
sum(20, '30'); // '2030'

function sum(a : string, b : string) : string {return a + b}
function sum(a : number, b : number) : number {return a + b}

• 예시3

function sum <T> (a : T, b : T) : T {return a + b};

7.1.3 제네릭과 any의 차이

• 타입을 넘겨줘도 any타입으로 추론해서 반환한다.

• 제네릭을 사용할 경우, 제네릭 타입이 선언되는 순간 해당 타입이 고정되어 변할 수 없는 값이 된다.

• 타입스크립트에서 추론한 타입과 관련해서 메서드 힌트를 보여주고 있다.

• 이와 같이 생성시점에 타입을 지정해줄 수 있다.

// as로 바꾸어 타입을 강제 지정. 타입 단언.
<number> lion (a, b);

// 제네릭
lion <number> (a, b);

7.2 제네릭 타입

7.2.1 제네릭 인터페이스

• 제네릭 인터페이스

// 제네릭 인터페이스
interface GenericInterface <T> {
	(x : T) : T;
}

function printX <T> (x : T) : T {
	return x;
}

let outputOfX : GenericInterface <number> = printX;

console.log(printX(20)); // 20

• 인터페이스의 내부에서 제네릭 선언

// 인터페이스의 내부에서 제네릭 선언
interface GenericInterface <T> {
	<T> (x : T) : T;
}

function printX <T> (x : T) : T {
	return x;
}

let outputOfX : GenericInterface <number> = printX;

console.log(printX<string>('20')); // '20'

• 예시1

interface Student<T> {
	name : string;
	age : number;
	property : T; //property에 다양한 타입의 데이터가 들어올 수 있음
}

const student1 : Student<{ grade : string; attendance : boolean}> = {
	name : '김도영',
	age : 29,
	property : { grade : 'A', attendance : true }, // 유연한 할당
};

const student2 : Student<{looks : string}> = {
	name : '박시우',
	age : 25,
	property : {looks : 'handsome'}, // 유연한 할당
};

7.2.2 제네릭 함수

7.2.2.1 기본적인 함수에서의 사용

// 배열을 하나 받아 순서를 뒤집어 리턴하는 함수
function reverseArr<T>(arr: T[]): T[] {
	let result = [];

	for (let i = arr.length - 1; i >= 0; i--) {
		result.push(arr[i]);
	}

	return result;
}

console.log(reverseArr<number>([1, 2, 3])); // [3, 2, 1]

console.log(reverseArr([1, 2, 3])); // <number>를 제거해도 무방하다.

7.2.2.2 특정 객체 타입에 대응하기

interface Icecream {
	price: number;
	flavor: string;	
}

interface Bread {
	price: number;
	name: string;
}

interface Coffee {
	beanType: string;
}	

function getPrice<T>(item: T) {
	return item.price + " 원";
}

function getPrice<T extends { price: number }>(item: T) {
	return item.price + " 원";
}

const chocoIcecream: Icecream = {
	price: 2800,
	flavor: "초코맛"
}

const custardCreamBread: Bread = {
	price: 100000,
	name: "커스타드 빵"
}

const cappuccinoCoffee: Coffee = {
	beanType: "케냐"
}

console.log(getPrice(chocoIcecream)); // 2800 원
console.log(getPrice(custardCreamBread)); // 100000 원
console.log(getPrice(cappuccinoCoffee)); // undefined 원, 타입스크립트 오류

7.2.3 제네릭 클래스

class Bread<T> {
	name!: T;
	price!: T;
	getChange!: (price: T) => number;
}

let custardCream = new Bread<string>();
custardCream.name = "커스타드";
custardCream.price = "100000";
custardCream.getChange = (paidMoney) => 
	parseInt(paidMoney) - parseInt(custardCream.price); // [1]

console.log(custardCream.getChange("120000")) // 20000

이처럼 클래스에 제네릭을 사용한 경우 인스턴스 생성시 타입을 지정할 수 있다.

[1] 에서 getDiscountedPrice() 메서드의 price 매개변수 타입이 string 이 됐다는 점에 주목하자.

7.2.4. 더 나아가기

7.2.4.1 열거형과 네임스페이스에서의 제네릭

• 열거형(enum)과 네임스페이스(namespace)는 제네릭 타입을 사용할 수 없다.

7.2.4.2 화살표 함수에서의 제네릭 사용

const reverseArr = <T>(arr: T[]): T[] => {
	// ... 코드 생략
	return result;
}

const reverseArr = <T extends {}>(arr: T[]): T[] => {
	// ... 코드 생략
	return result;
}

const reverseArr = <T extends unknown>(arr: T[]): T[] => {
	// ... 코드 생략
	return result;
}

7.3 제네릭 타입 제한(제약 조건)

7.3.1 프로퍼티 제약

function getLength<T extends { length: number }>(obj: T) {
	return obj.length;
}

7.3.2 콜백함수 제약 조건

function exchange<T extends (input: number) => number>
  (callback: T, input: number)
	: number {
	return callback(input);
}

console.log("1달러는 원화로 "
	 + exchange((input: number) => input * 1400, 1)
	 + "원 입니다.")

7.3.3 keyof 제약 조건

function getValue<T, U extends keyof T>(obj: T, key: U) {
	return obj[key];
}

const obj = { name: "객체이지롱" };

console.log(getValue(obj, name)); // 객체이지롱