TypeScript Generic

TS의 Generic 문법은 새싹 수업에서도 배우긴 했는데, 지금 코드를 다시 보니까 굉장히 짧게 배웠길래 이번에 배운 내용을 블로그에 기록해둔다. 사실 Generic 문법의 원리가 어려운건 아니라서, 이번에도 그리 길게 배우진 않았음!😝

※ 새싹 수업 당시의 기록은 여기 → https://hjinn0813.tistory.com/50#Generic-1

---

함수 Generic

interface Obj {
  x: number;
}
type Arr = [number, number];

// 제너릭 문법으로 타입을 파라미터로 전달
function toArray<T, U>(a: T, b: U): [T, U] {
  return [a, b];
}

console.log(
  // 꺽쇠 괄호로 타입을 명시적으로 지정, 추론 가능하여 생략 가능
  toArray<string, string>('a', 'b'),
  toArray<number, number>(1, 2),
  toArray<boolean, boolean>(true, false),
  toArray<Obj, Obj>({ x: 1 }, { x: 2 }),
  toArray<Arr, Arr>([1, 2], [3, 4])
);

함수 이름 뒤에 꺽쇠 괄호를 사용해서 타입을 지정하고, 파라미터와 반환값에도 같은 타입이 온다고 명시해준다.

아래에 console.log를 통해 다양한 타입을 지정하고 파라미터에 해당하는 값을 넣어봤다.

배열은 'type Arr'에서 index가 2개라고 명시하고 있어서, 만약 index 개수가 맞지 않으면 오류가 발생한다.

---

클래스 Generic

class User2 {
  public name2;
  constructor(name: string) {
    this.name2 = name;
  }
  getName2(): string {
    return this.name2;
  }
}

이렇게 작성하는게 가장 기본적인 형식이다.

User2라는 클래스는 name2라는 public 속성을 가지고 있고, 생성자 함수에서 초기화된다.

getName2() 메서드는 name2 속성의 값을 반환한다.

만약 이걸 generic 문법을 사용하면서 축약하면 아래와 같이 된다.

class User2<T> {
  constructor(public name2: T) {}

  getName2(): T {
    return this.name2;
  }
}

const admin2 = new User2<string>('소금');
console.log(admin2.getName2());

생성자함수가 name2의 속성을 public이라고 정의함과 동시에, 값(this.name)을 초기화한다.

User2라는 클래스로 admin2라는 인스턴스를 만들었고, 값으로 '소금'을 넣었다.

그러므로 console.log를 확인하면 admin2의 값인 '소금'이 출력된다.

---

인터페이스 Generic

interface MyCat<T> {
  name: string;
  value: T;
}

const user1: MyCat<string> = {
  name: '소금',
  value: '귀여움',
};
const user2: MyCat<number> = {
  name: '후추',
  value: 22,
};
const user3: MyCat<boolean> = {
  name: '레오',
  value: true,
};
const user4: MyCat<number[]> = {
  name: '분필',
  value: [1, 2, 3],
};

여기서는 MyCat 인터페이스에 generic 문법을 사용한다고 명시했고, value에 들어오는 값이 generic 문법을 사용한다.
그래서 T에 들어오는 타입과 value 속성의 값이 가지는 타입이 같다.

만약 generic으로 사용하는 타입에 제약을 건다면 어떻게 될까?

---

Generic 타입의 제약

interface MyDog<T extends string | number> {
  name: string;
  value: T;
}

const user1: MyDog<string> = {
  name: '소금',
  value: '귀여움',
};
const user2: MyDog<number> = {
  name: '후추',
  value: 22,
};

// 아래 코드는 오류 발생
const user3: MyDog<boolean> = {
  name: '레오',
  value: true,
};

여기에서는 인터페이스를 만들면서 generic 문법으로 타입을 string 또는 number만 가능하다고 명시했다.

그래서 user1, user2는 오류가 발생하지 않지만 user3은 오류가 발생한다.

(인터페이스에서 지정하지 않은 타입을 사용했기 때문)