Type Generic

1. Generic : 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것

제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다.

1) 제네릭 활용하기

Generic 기본 문법 정리

V : value
T : type
K : key
E : element

function genericTest<T>(arg: T): T {
  return arg;
}
 
genericTest<string>("Hello World!");
genericTest("Hello World!"); // 타입 추론

사용 이유

타입을 미리 지정하게 되면 범용성이 떨어짐
any를 쓰면 return 타입과 parameter 타입을 알 수 없음.

제네릭 타입 변수(Generic Type Variables)

function genericTest<T>(arg: T): T {
  console.log(arg.length); // error: 'T' 형식에 'length' 속성이 없습니다.
  return arg;
}

/* T(타입 변수)에 대한 세부적인 변수 타입을 지정 */
 
function genericTest<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}
 
=> genericTest는 타입변수 T와 T 배열 인수 arg를 취하고 T 배열을 반환

제네릭 타입 (Generic Types)

function genericTest<T>(text: T): T {
    return text;
  }
  // #1
  let str: <T>(text: T) => T = genericTest;
 
  // #2
//   let str: {<T>(text: T): T} = genericTest;
 
=> #1,#2는 같은 의미임.

제네릭 인터페이스 (Generic Interface)

interface IGenericTestFn {
  <T>(text: T): T;
}
function genericTest<T>(text: T): T {
  return text;
}
let myString: IGenericTestFn = genericTest;

T는 제네릭을 선언할 때 관용적으로 사용되는 식별자로 타입 파라미터(Type parameter)

/* 인터페이스에 인자 타입을 강조 하고 싶을 때 */
 
interface IGenericTestFn<T> {
  (text: T): T;
}
function genericTest<T>(text: T): T {
  return text;
}
let myString: IGenericTestFn<string> = genericTest;

제네릭 클래스 (Generic Classes)

interface Value<L,R> {
    callLeft: () => L;
    callright: () => R;
}
 
class Diary<L,R> implements Value<L,R> {
		//implements 키워드는 class의 interface에 만족하는지 여부를 체크할 때 사용
		//implements한 interface의 타입이 없다면 에러를 반환
    constructor(private feeling: L, private shortWords: R){}
		//private으로 클래스 내부에서만 참조 가능하다.
    callLeft(): L {
        console.log(this.feeling);
        return this.feeling
    }
 
    callright(): R {
        console.log(this.shortWords);
        return this.shortWords
    }
}
 
const yesterdayDiary: Value<string, string> = new Diary("Bad", "몸이 아프네요");
//생성자 호출
console.log(yesterdayDiary);
 
const todayDiary = new Diary({"happy": 10}, "로또 당첨");
//생성자 호출
console.log(todayDiary);
 
=> 결과값
 
Diary { feeling: 'Bad', shortWords: '몸이 아프네요' }
Diary { feeling: { happy: 10 }, shortWords: '로또 당첨' }

제네릭 제약조건 (Generic Constraints)

interface Info {
  feeling: string;
}
 
function call<T extends Info>(today: T): T {
  console.log(today.feeling);
  return today;
}
 
call({ feeling: "good" });
call("good"); // Argument of Type 'string' is not assignable to paramerter of type 'Info'

문자열 타입의 인수는 Info 타입의 매개변수에 할당할 수 없다는 오류

Info 인터페이스를 확장하였기 때문에, 정의된 인터페이스와 일치해야함.

any를 이용하여 구현하면 저장하고 있는 자료의 타입이 모두 같지 않다는 문제점이 생기는데, 이를 사용하면 굳이 타입스크립트를 쓸 필요가 없다