제네릭 (Generics)

1. 제네릭 (Generics)

function getSize(arr: number[] | string[] | boolean[] | object[]): number {
	return arr.length;
}

const arr1 = [1, 2, 3];
getSize(arr1); // 3

const arr2 = ['a', 'b', 'c'];
getSize(arr2); // 3

const arr3 = [false, true, true];
getSize(arr3); // 3

const arr4 = [{}, {}, {name: 'Tim'}];
getSize(arr4); // 3

function getSize<T>(arr: T[]): number {
	return arr.length;
}

const arr1 = [1, 2, 3];
getSize<number | string>(arr1); // 3

const arr2 = ['a', 'b', 'c'];
getSize<string>(arr2); // 3

const arr3 = [false, true, true];
getSize(arr3); // 3

const arr4 = [{}, {}, {name: 'Tim'}];
getSize(arr4); // 3

• 함수 오버로드나 유니온 타입을 사용하여 타입들을 계속 적어줘야할 때 사용
• 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있음
• 선언할 때는 타입 파라미터만 적어주고, 생성하는 시점에 사용하는 타입을 결정
• 제네릭은 타입 파라미터()를 적고, 어떤 타입을 전달 받아서 함수에서 사용할 수 있도록 함
• 사용하는 쪽에서 타입을 정해주면, T부분이 해당하는 타입으로 사용됨
• 타입을 적어주지 않아도, 전달되는 매개변수를 보고 추론 가능
• 특정 타입으로 강제하고 싶은 경우에만 적어주어도 상관없음
  
  

2. 인터페이스와 제네릭

interface Mobile<T> {
	name: string;
	price: number;
	option: T;
}

const m1: Mobile<{color: string; coupon: boolean}> = {
	name: 's21',
	price: 1000,
	option: {
		color: 'red',
		coupon: false,
	},
};

const m2: Mobile<string> = {
	name: 's20',
	price: 900,
	option: 'good',
};

• 어떤 데이터가 들어올지 모르는 상태에서 제네릭 사용
• 타입을 모두 적는 것은 비효율적이기 때문
• 하나의 인터페이스만 선언하고, 각기 다른모습의 객체들을 만들 수 있음
• any 대신 제네릭을 이용해서 타입을 넣어주기
  
  

3. 제네릭과 extends

interface User {
	name: string;
	age: number;
}

interface Car {
	name: string;
	color: string;
}

interface Book {
	price: number;
}

const user: User = {name: 'a', age: 10};
const car: Car = {name: 'bmw', color: 'red'};
const book: Book = {price: 3000};

function showName<T extends {name: string}>(data: T): string {
	return data.name;
}

showName(user);
showName(car);
showName(book); // 에러 발생

• 확장된 상태의 타입이 올때 extends를 사용
• 다양한 모습의 객체가 올 수 있지만, 항상 해당 프로퍼티를 갖고 있음
• 프로퍼티가 없거나 프로퍼티의 타입이 다르다면 에러 발생
  
  
  

참고 : 코딩앙마