[Typescript] 제네릭 Generic <T>

배열 타입 

• 어떤 타입의 데이터가 저장되든 상관하지 않으며
• 저장하는 요소가 문자열 목록, 숫자형 목록, 객체 목록, 혼합된 데이터의 목록이든 상관하지 않지만 적어도 정보가 저장되는 것인지에 대해서는 확인 함

제네릭 타입 Generic <T>

• 타입 안전성과 결합된 유연성을 제공
• 전달하는 값이나 클래스에서 사용하는 값을 유연하게 지정할 수 있음
• 추가한 제약 조건이 있다면 그 조건만 준수하면 됨

const names: Array<string> = []; // string []

const names: Array<string | number> = []; // string [], number []

• promise 타입

const promise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("This is done!");
  }, 2000);
});

promise.then(data => {
    data.split(' ')
})

제네릭 함수

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

const mergedObj = merge({name: 'Max', hobbies: ['Sports']}, {age:30});
console.log(mergedObj.age);

제약 조건 설정하기

• 제약 조건을 사용하면 제네릭 함수 등에 사용할 수 있는 구체적인 타입의 범위를 좁힐 수 있음

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

const mergedObj = merge({ name: "yumi", hobbies: ["Sports"] }, { age: 30 });

console.log(mergedObj);

• 다른 일반 함수

interface Lengthy {
  length: number;
}

function countAndDescribe<T extends Lengthy>(element: T) {
  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(['Sports', 'Cooking']));

keyof

• keyof 키워드를 지니는 제네릭 타입을 사용하여 이와 같은 정확한 구조를 갖고자 한다는 것을 타입스크립트에게 알려줌

function extractAndConvert<T extends object, U extends keyof T>(
  obj: T,
  key: U
) {
  return "Value: " + obj[key];
}

extractAndConvert({ name: "yumi" }, "name");

제네릭 클래스

• 클래스 내부에서 사용되는 데이터 형식을 동적으로 지정할 수 있는 기능을 제공
• 이를 통해 코드의 재사용성과 유연성을 높일 수 있음

// 제네릭 클래스 선언
class Container<T> {
  private value: T;

  constructor(initialValue: T) {
    this.value = initialValue;
  }

  // 값을 설정하는 메서드
  setValue(newValue: T): void {
    this.value = newValue;
  }

  // 현재 값을 가져오는 메서드
  getValue(): T {
    return this.value;
  }
}

// 숫자를 저장하는 Container 인스턴스 생성
const numberContainer = new Container<number>(42);

// 문자열을 저장하는 Container 인스턴스 생성
const stringContainer = new Container<string>("Hello, TypeScript!");

// 사용 예시
console.log(numberContainer.getValue()); // 출력: 42
console.log(stringContainer.getValue()); // 출력: Hello, TypeScript!

// 값 변경
numberContainer.setValue(123);
stringContainer.setValue("Updated value");

console.log(numberContainer.getValue()); // 출력: 123
console.log(stringContainer.getValue()); // 출력: Updated value

partial 타입

interface CourseGoal {
  title: string;
  description: string;
  completeUntil: Data;
}

function createCourseGoal(
  title: string,
  description: string,
  data: Date
): CourseGoal {
  let courseGoal: Partial<CourseGoal> = {}; 
  courseGoal.title = title;
  courseGoal.description = description;
  courseGoal.completeUntil = date;
  return courseGoal as CourseGoal;
}

제네릭과 유니언 타입의 차이

• 유니언 타입
  • 함수를 호출할 때마다 이 타입들 중 하나로 호출할 수 있는 함수가 필요한 경우에 사용
  • 모든 메소드 호출이나 모든 함수 호출마다 다른 타입을 지정하고자 하는 경우 사용
• 제네릭 타입
  • 특정 타입을 고정하거나, 전체 클래스 인스턴스에 걸쳐 같은 함수를 사용하거나, 전체 함수에 걸쳐 같은 타입을 사용하고자 할 때 제네릭 타입 사용
  • 한 타입으로 고정 시킴
  • 다양한 타입과 함께 작동하는 타입을 사용하는 경우 (예: 다른 타입의 데이터를 내보내는 객체)