[TS] Generics 1️⃣

🍒 [230315 TIL] Understanding TypeScript

Generics 1️⃣

What is Generics?

제네릭은 vanilla JavaScript에는 없고 TypeScript에만 있는 개념으로,

특정 타입의 데이터를 저장하여 타입 안전성을 확보할 수 있는 기법이다.

 

TypeScript에서 기본적으로 제공하는 제네릭 타입으로는 Array, Promise가 있다.

// Array
const names: Array<string> = [];
/* Array에 대한 타입을 string으로 지정하면(= Generic)
앞으로 names 배열에 들어올 데이터의 타입이 string임을 추론함 */

// Promise
const promise: Promise<number> = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(10);
	}, 2000);
});

promise.then(data => {
	data.split(' '); // Error occurred
}
/* Promise에 대한 타입을 number로 지정했기 때문에(= Generic)
promise의 반환값 또한 number로 추론하여 split 메서드를 사용할 수 없음 */

 

Generic Functions

function merge(objA: object, objB: object) {
	return Object.assign(objA, objB);
}

const mergedObj = merge({ name: 'Shou' }, { age: 29 });
mergedObj.name; // Error occurred
mergedObj.age; // Error occurred

위 함수에서 merge의 반환값이 object임은 추론 가능하지만,

mergedObj의 타입이 정확히 { name; age; }라는 정보를 담고 있는 것이 아니기 때문에

mergedObj.name, mergedObj.age로 접근하면 컴파일 오류가 발생한다.

 

const mergedObj = merge({ name: 'Shou' }, { age: 29 }) as { name: string, age: number }; 로 형변환을 할 수 있지만 매우 번거롭다!!

이 때 제네릭을 사용한다면?

 

function merge<T, U>(objA: T, objB: U) {
	return Object.assign(objA, objB);
}

const mergedObj = merge({ name: 'Shou' }, { age: 29 });

위와 같이 작성하게 되면 merge에 전달되는 두 매개변수가 서로 다른 타입이 될 수 있다고 TypeScript에게 전달하게 된다.

TypeScript는 무작위의 객체 타입이 아니라 다양한 타입의 데이터를 얻고자 한다고 인식하게 되면서

mergeObj에 저장된 데이터가 두 인자의 Intersection임을 추론한다.

 

또한 타입을 선언할 때 고정적으로 정해두는 것이 아니라 생성할 때 명시함으로써 동적으로 설정할 수 있다는 장점이 있다.

일반적으로 제네릭 타입을 사용할 때 첫번째 식별자로는 T, 두번째 식별자로는 U를 전달한다.

 

Constraints

제네릭 타입을 기반으로 특정 제약 조건을 설정할 수 있다.

 

function merge<T extends object, U extends object>(objA: T, objB: U) {
	return Object.assign(objA, objB);
}

const mergedObj = merge({ name: 'Shou', hobbies: ['Game'] }, 29);
// Error occurred

extends 키워드를 활용해 T와 U가 어떤 구조를 가져도 상관없지만 '객체'여야 한다는 정보를 전달하였다.

mergedObj에서는 두번째 인자로 객체가 아닌 number 타입을 전달했기 때문에 컴파일 오류가 발생한다.

제약 조건에는 무엇이든지 지정이 가능하다! T extends string, T extends string | number ... 단, 모든 제네릭에 제약 조건을 설정할 필요는 없다!

 

interface Lengthy {
	length: number;
}

function countAndDescribe<T extends Lengthy>(element: T): [T, string] {
	let descriptionText = 'Got no value.';

	if (element.length === 1) {
		descriptionText = 'Got 1 element.'
	} else if (element.length > 1) {
		descriptionText = 'Got ' + element.length + ' elements.';
	}
            
	return [element, descriptionText];
}

console.log(countAndDescribe('Hi there!'));
// ['Hi there', 'Got 9 elements.']
console.log(countAndDescribe(['Game', 'Piano']);
// [['Game', 'Piano'], 'Got 2 elements.']

제약 조건을 설정함으로 countAndDescribe에 전달되는 인자가 무엇이든 length 속성도 반환됨을 명시할 수 있다.