[Typescript] Generic

Generic이란?

• Generic은 코드를 작성할 때가 아니라 코드가 수행될 때 타입을 명시
• 코드를 작성할 때 식별자를 싸용, 아직 정해지지 않은 타입을 표시
  - 일반적으로 식별자는 T, U, V ... 를 사용
• 정적 type 언어(C, Java)는 클래스나 함수를 정의할 때 type을 선언

Generic을 사용하는 이유

• 재사용성이 높은 함수와 클래스 생성
• 오류를 쉽게 포착 가능
• 다양한 타입 입력 가능(=Union)

Generic 함수

function sort<-T>(itemsL T[]): T[] {
	return items.sort();
} 
const nums: number[] = [1,2,3,4];
const chars: string[] = ["a","b","c"];

sort<number>(nums);
sort<string>(chars); // Error

Generic 클래스

class Queue<T> {
	protected data: Array<T> = [];
    push(item: T) {
    	this.data.push(item);
    }
    pop(): T | undefined {
    	return this.data.shift();
    }
}

const numberQueue = new Queue<Number>();

numberQueue.push(0);
numberQueue.push("1"); // 의도하지 않은 실수를 사전 검출 가능
numberQueue.push(+"1"); // 실수를 사전 인지하여 수정 가능

제약조건(Constraints / keyof)

• Generic에 원하지 않는 속성에 접근하는 것을 막기 위해 사용

1. Constraints : 특정 타입들로만 동작하는 Generic 함수를 만들 때 사용
2. keyof : 두 객체를 비교할 때 사용

Constraints

• Generic T에 제약 조건을 설정(문자열 or 숫자)
• 제약 조건을 벗어나는 타입 선언 시 에러 발생

const printMessage = <T extends string | number>(message: T): T => {
	return message;
}
printMessage<String>("1);
printMessage<Number>(1);
printMessage<Boolean>(false); // Error

keyof

: 객체 형태의 타입을, 따로 속성들만 뽑아 모아 유니온 타입으로 만들어주는 연산자

interface User {
  id: number;
  name: string;
  age: number;
  gender: "m" | "f";
}
type UserKey = keyof User; 
// 'id' | 'name' | 'age' | 'gender'

const getProperty = <T extends object, U extends keyof T>(obj: T, key: U) => { 
// T는 object를 갖는 제약, U는 T를 갖는 제약
	return obj[key]
}
getProperty({a:1, b:2, c: 3}, "a");

getProperty({a:1, b:2, c:3,}, "z"); // Error

• 두 번째 함수에서 오류 발생
• Generic T는 키 값이 a,b,c만 존재하는 object
• U의 값인 'z'가 Generic T의 키 값 중 존재하지 않기 때문에 오류 발생

Union Type이란?

• "|"를 사용해 두 개 이상의 타입을 선언하는 방식
• Union은 선언한 타입들의 공통된 메소드만 사용 가능
• 리턴 값이 하나의 타입이 아닌 선언된 Union 타입으로 지정

const printMessage = (message: string | number) => {
	return message;
}

const printMessage = (message: string | number) => {
	return message;
}
const message1 = printMessage(1234);
const message2 = printMessage('hello world!");

message1.length // Error
// string과 number type의 공통된 메소드만 사용 가능

출처 - [엘리스 강의 자료]