Generics

제네릭은 타입스크립트에만 있고 바닐라 자바스크립트에는 없어서 변환할 수는 없지만 타입스크립트에서는 사용 가능하다.

모든 프로그래밍 언어는 아니지만 ‘C#’같은 일부 프로그래밍 언어에서 볼 수 있다.

Type 안정성과 결합된 유효성을 제공한다!

const names: Array<string> = []; // string[]
// names[0].split(' ');

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

promise.then(data => {
  data.split(' '); // ❌ err!
})

Generic function 생성

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

const mergeObj = merge({ name: 'Juhwan' }, { age: 30 });
mergeObj.name; // ❌ 접근 불가

const mergeObj = merge({ name: 'Juhwan' }, { age: 30 }) as {name: string, age: number};
mergeObj.name; // 💩 접근은 가능하나 코드가 길어짐

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

const mergeObj = merge({ name: 'Juhwan', hobbies: ['Coding'] }, { age: 30 });
console.log(mergeObj.age);

// 이렇게 상세 명세도 가능
const mergeObj = merge<{name:string, hobbies: string[]}, {age:number}>({ name: 'Juhwan', hobbies: ['Coding'] }, { age: 30 });
console.log(mergeObj.age);

특정 객체를 갖는 게 아닌 두 매개변수의 인터섹션이 반환된다는 것을 인식한다(같아도 상관이 없다)

❗이 때, T와 U가 object가 아닌 다른 게 와도 오류를 내뱉지 않는다!

Generic 제약 조건

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

const mergeObj = merge({ name: 'Juhwan', hobbies: ['Coding'] }, { age: 30 });
console.log(mergeObj.age);

interface Lengthy {
  length: number;
}

function countAndPrint<T extends Lengthy>(element: T): [T, string] {
  let descriptionText = 'Got no value.';
  if (element.length === 1) {
    descriptionText = 'Got 1 element.';
  } else if (element.length > 0) {
    descriptionText = 'Got ' + element.length + ' elements.';
  }
  return [element, descriptionText];
}

console.log(countAndPrint('Hi there!'));

• keyof 사용

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

extarctAndConvert({ name: 'Max' }, 'name');

Generic utility types

오직 typescript에서만 가능하다

• Partial

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

• Readonly

const names: Readonly<string[]> = ['Juhwan', 'Max'];
names.push('Manu'); // ❌ err
names.pop(); // ❌ err

Generic types vs Union types

보통 제네릭 타입과 유니온 타입을 많이 헷갈려한다

제네릭 타입은

1. 특정 타입을 고정하거나,
2. 생성한 클래스 인스턴스에 모두 같은 함수를 사용하거나,
3. 전체 함수에 같은 타입을 사용하고자 할때 유용하다

유니온 타입은

모든 메소드 호출이나 모든 함수 호출마다 다른 타입을 지정하고 자 하는 경우에 유용하다

제네릭을 사용하면 함께 작동하는 데이터 구조를 만들거나 다양한 타입의 값을 래핑할 수 있습니다

제네릭 관련 추가 정보