[TypeScript] Type Generic

카테고리 : 프로그래밍 언어
태그: ts · typescript · Type Generic · Type Inference · 타입 추론 · 타입 표명
등록일: 2023년 04월 03일
최근 업데이트: 2023년 04월 03일

---

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

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

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

1) 제네릭 활용하기

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 타입을 알 수 없음.

---

1. 제네릭 타입 변수(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 배열을 반환

---

1. 제네릭 타입 (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는 같은 의미임.

---

1. 제네릭 인터페이스 (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;

---

1. 제네릭 클래스 (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: '로또 당첨' }

---

1. 제네릭 제약조건 (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를 이용하여 구현하면 저장하고 있는 자료의 타입이 모두 같지 않다는 문제점이 생기는데, 이를 사용하면 굳이 타입스크립트를 쓸 필요가 없다