JavaScript & TypeScript

[TS] 제네릭(Generics)

반응형

 

  클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 것으로, 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입입니다. 즉, 어떠한 타입이든 받으면서 받은 해당 타입을 그대로 리턴하게 하는 것 입니다.

 

제네릭 타입은 다양한 타입을 받을 수 있다는 유연성이란 점에서 타입의 정보가 동적으로 결정됩니다.

 

클래스 상속을 사용하면 별도의 자료 타입을 받고자 하는 클래스를 추가해야 하고 중복되는 코드를 양산하기에 불편합니다. 바로 이런 경우에 유용하게 사용할 수 있는 것이 제네릭 입니다.

 

 

함수

function checkNull<T>(arg: T | null): T {
  if (arg == null) {
    throw new Error()
  }
  return arg;
}

function generics<T>(arg: T[] | null): T[] {
  console.log(arg.length);
  return arg;
}


function loggingIdentity<T>(arg: Array<T>): Array<T> {
  console.log(arg.length);
  return arg;
}

 

클래스

interface Direction<L, R> {
  left: () => L;
  right: () => R;
}

class DirectionLeftRigth<L, R> implements Direction<L, R> {
  constructor(private valueL: L, private valueR: R) {}
  left(): L {
    return this.valueL;
  }

  right(): R {
    return this.valueR;
  }
}

const either: Direction<number, number> = new DirectionLeftRigth(1, 2);
const best = new DirectionLeftRigth(3, {hour: 5});
// 사용자에 의해 타입 결정
either.left();
best.right();

 

 

 

제네릭의 조건 제약

제한적인 범위 내에서 허용하도록 타입에 extends를 사용하도록 하는 것 입니다.

클래스에서의 상속 interface가 아닌, 타입에서의 상속으로 interface를 사용한다고 생각하면 쉽습니다.

interface Car {
  taxi(): void;
}

function transportation<T extends Car>(choice: T): T {
  choice.taxi()
  return choice
}

 

 

제네릭 제약조건에서 타입 매개변수 사용

어떠한 오브젝트에 타입을 받아서 해당 K(key)가 존재해야 리턴 됩니다.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // 성공
getProperty(x, "m"); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음.
반응형

'JavaScript & TypeScript' 카테고리의 다른 글

[TS] type alias, interface 차이  (0) 2022.03.20
[JS] ProtoType  (0) 2022.03.15
[TS] OOP  (0) 2022.03.14
[TS] Type  (0) 2022.03.07
[TS] Type Script  (0) 2022.03.06